jQuery 可拖动：追加到相同位置

Question

我正在创建当用户单击按钮时添加的动态表。

 $('#addMenu').click(function(){
       var div = "<div>Some Data</div>";
       $('#dropbox').append(div);
 });

css

 #dropbox{
  height:200px;
  width:200px;
 }

html

 <div id='dropbox'></div>   
 <input type='button' id='addMenu' value='addme'>

追加将新的 div 放在最后一个 div 的下方。这些 div 是可拖动的，因此下拉框中不再有 div。我如何将任何新的 div 附加到保管箱 div 中的相同位置？

fiddle（虽然丑陋，但明白了要点）

fiddle

点击添加菜单。（单词文本出现在保管箱中）
将单词文本拖到"drop here"
再次点击添加菜单。

我希望它出现在第一个出现的地方。

mic4ael 的答案的问题在于它也会移动拖动的实体。在这里看到：

http://jsfiddle.net/u6xboaax/1/

Answer 1

$('#dropbox').prepend(div)是您要找的东西吗？

更新：

<div id='dropbox'>
    <span id="mark">i want each new div to appear here</span>
</div>

$('#addMenu').click(function () {
    var newDiv = "<div class='yes'>Text</div>";
    $(newDiv).insertAfter('#dropbox > #mark');
    $('.yes').draggable({
        revert: "invalid",
    });
});
$('#dest').droppable();

Answer 2

为什么不使用 jQuery sortable 呢？

IMO，这提供了更清晰的结果，它会自动解决您的问题：

这可以用最少的 HTML 和 jQuery 来实现：

HTML

<input type='button' id='addMenu' name='addMenu' value='Add Item'>
<div id="dropbox">
     <ul id="list1" class="list">
     </ul>
</div>
<div id='dest'>
     <ul id="list2" class="list">
         <li>Add your items here</li>
     </ul>
</div>

jQuery

var c = 0;
$('#addMenu').click(function() {
    c++;
    $("#list1").append("<li><div class='draggable item'>Draggable "+c+"</div></li>"); 
});
$( "#list1, #list2" ).sortable({
    helper: 'clone',
    opacity: 0.5,
    cursor: "move",
    connectWith: ".list",
    receive: function(event, ui) {
      ui.item.appendTo("#list2");
    }
});
$( "#list1,#list2" ).disableSelection();

> DEMO

Answer 3

这是code on http://jsfiddle.net回答你的问题吗？

我将 position:absolute 属性设置为 div.yes（在 CSS 部分）。我还设置了 bottom-margin 属性 of #dropbox 这样新创建的 div.yes 就不会位于 #dest.

里面

希望对您有所帮助。

jQuery 可拖动：追加到相同位置

jQuery draggable: append to same position

jquery

append

jquery-ui-draggable

HTML

jQuery

> DEMO