JQuery .append（）獨立元素

我製作了一個腳本，它將一個圖像和一個文本框添加到畫布上。爲了使文本框出現在圖像上，我需要將CSS應用於圖像。因此，我做了分隔divs，<img>的圖像和<text>的文字。JQuery .append（）獨立元素

這會產生兩個問題。當我第一次添加圖像和文本時，這兩個元素被認爲是分開的，我只能拖動圖像或文本，而不是同時拖動兩個元素。此外，當我添加另一個圖像和另一個文本框時，兩個圖像並不相互疊加顯示，而是在文本框旁邊生成文本，並在圖像旁邊生成圖像。

所以我的問題是這樣的。是否有可能將這兩個元素合併爲一個，並且在產生時讓他們這樣做，讓他們每次都以同樣的方式做到這一點？

這是我爲它製作的Javascript。

$(document).ready(function() { 
$("#img").draggable(); 
$("#text").draggable(); 
}); 

function addEvent() { 
$("#img").append("<img src='Sticky_Note.png'</a>") 
$("#text").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />") 

}

如果這還不夠的信息（我n00btastic，對不起），我已經attactched一個前沿鏈接here.

感謝您的幫助！

來源

2012-02-26 TrustedDeveloper

''無效的HTML並沒有多大意義。 – ThiefMaster 2012-02-26 21:46:41

謝謝！我解決了這個問題。 – TrustedDeveloper 2012-02-26 21:58:35

嘗試在圖像和文本元素周圍創建包裝<div>，例如<div id="#wrapper">。然後，你可以做到以下幾點：

$('#wrapper').draggable();

你的addEvent代碼是這樣：

function addEvent() { 
    $("#wrapper").append("<img src='Sticky_Note.png'</a>"); 
    $("#wrapper").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />"); 
}

來源

2012-02-26 21:46:00

有一個與您的實現的幾個問題，我會忽略的基本文件的問題，因爲我圖你一直在拖延一起簡單的例子:)

當您添加一個新的「注意」它不是單獨活動，它是可移動的容器，以便他們只是疊起，你只需要添加更多的內容在公告板的容器，即：其他textarea/image，然後是另一個textarea /圖像。

我已經在pastebin here上提供了一個解決方案，隨時查看一下，希望它能幫助您指出正確的方向。

其實，我就會把它嵌入也爲後人

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <style> 
     #corkboard { position: relative; } 
     #corkboard textarea { position: absolute; width: 380px; height: 300px; top: 100px; left: 60px; background: none; border: none; font-size: 24px; color: #03f; font-family: 'comic sans ms', serif; } 
     #corkboard img { position: absolute; } 

     .corkboard-item { 
      position: absolute; 
      float: left; 
      width: 500px; 
      height: 500px; 
     } 
    </style> 

    <script> 
     $(document).ready(function() { 
      // Create our corkboard item 
      // 
      $corkboard_item = $('<div></div>'); 
      $corkboard_item 
       .addClass('corkboard-item') 
       .append('<img src="http://www.bookofsam.com/corkboard/Sticky_Note.png" />') 
       .append('<textarea name="comments" x-webkit-speech="x-webkit-speech">Enter your note</textarea>'); 

      // Counter goodness 
      $x = 1; 


      // Make sure the one we click is always at the top 
      // 
      $('img, textarea').live('click', function(e) { 
       e.preventDefault(); 

       $('.corkboard-item').each(function() { 
        $(this).css({ 'z-index':1 }); 
       }); 

       $(this) 
        .parent() 
        .css({ 
         'z-index':2 
        }) 
      }); 


      // Add one when we click the button 
      // 
      $('a.add-item').live('click', function(e) { 
       e.preventDefault(); 

       var item = $corkboard_item.clone(); 
       $(item) 
        .find('textarea') 
        .attr({ 
         'name' : ('comment-' + $x) 
        }); 

       $x++; 

       $("#corkboard").append($(item).draggable()); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <p>CORKBOARD TEST - 0.8.555 </p> 

    <a href="#" class="add-item"><img src='http://www.bookofsam.com/corkboard/Note_Scale.png' align="right" /></a> 

    <div id="corkboard"></div> 
</html>

關於它的思考，我應該真正把「音符」形象上的「公告板項目」的背景圖像。

nbsp;

來源

2012-02-26 22:44:12 nbsp

JQuery .append（）獨立元素

回答

相關問題