javascript - jQuery 附加错误的位置

Question

我正在尝试将一个列表中的元素排序到两个列表中。但是，当我放下元素并将其附加到目标 div 时，位置非常奇怪(几乎是随机的)。

<div class='container'>// contains generated words, draggable
  <div class='word'>Word</div>
  <div class='word'>Word 2</div>
  ...
</div> 
<div class='target' id='target1'></div> // made droppable
<div class='target' id='target2'></div> // made droppable

放置函数:

$('.target').droppable({drop: function(e,ui) {
  $(this).append(ui.draggable);
}});

下面的 fiddle 显示了一个目标的问题。

http://jsfiddle.net/YZ8vJ/12/

我不知道为什么会这样，而且我还没有在 SO 或互联网上找到答案......

Answer 1

我认为位置元素的追加取决于您放置它们的位置。我在你的 html 中添加了一个 div <div id="dropEleme"></div>所以放置元素附加在那里。我还稍微更改了您的 js 代码以重置样式:

js

var a = ["word", "word2", "word3"];
for (var i = 0; i < a.length; i++) {
    $('.words').append(makeDiv(a[i]));
}
function makeDiv(e) {
    return "<div class='word'>" + e + "</div>";
}
$('.word').draggable({revert:'invalid'});
$('.target').droppable({drop:function(e,ui) {
    $(ui.draggable).attr("style",""); //added this line to reset style, like position.
    $("#dropEleme").append(ui.draggable);
}});

fiddle