【问题标题】：jQuery draggable: append to same positionjQuery可拖动：附加到相同的位置
【发布时间】：2015-11-08 05:42:40
【问题描述】：

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

 $('#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

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

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

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

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

【问题讨论】：

你的问题有点不清楚。 “这些 div 是可拖动的，因此 Dropbox 中不再存在 div。” 到底是什么意思？...
不清楚你想达到什么，同一个位置是什么意思？
让我快点搞定它
@bart2puck 我的回答是否也足以获得赏金还是我应该改进它？

标签： jquery append jquery-ui-draggable

【解决方案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();

【讨论】：

不，因为所有这些都会将旧创建的 div 推到新 div 之下。（我没骗你；））
不知道，如果有人这样做至少能解释一下就好了。
@bart2puck，也许你可以澄清你想要达到的目标？
是的，我正在尝试，它有大量代码，试图解析出重要的东西。
可能是因为我所说的。不过我不知道。

【解决方案2】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案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

【讨论】：