jQuery draggable：追加到同一位置

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是可拖动的，所以dropbox中没有div。如何将任何新div添加到dropbox div中的相同位置？

小提琴（它的丑陋，但得到了重点）

fiddle

1. 点击添加菜单。 （文字出现在dropbox中）
2. 将文字拖到“放在这里”
3. 再次点击添加菜单。

我希望它出现在第一个的位置。

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

code on http://jsfiddle.net 是否回答了您的问题？

我将eval (python go.py $argv) 属性设置为position:absolute（在CSS部分）。 我还设置了div.yes的{​​{1}}属性，以便新创建的bottom-margin不会位于#dropbox内。

希望这有帮助。

Answer 3

为什么不使用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