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);
}});

以下小提琴显示了一个目标的问题。

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

我很不清楚为什么会这样，我还没有在SO或互联网上找到答案......

Answer 1

我认为位置元素的附加取决于你放置它们的位置。我在你的html <div id="dropEleme"></div>中添加了一个div，所以drop元素会附加在那里。我也改变你的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

Answer 2

使用

$(this).append(ui);

而不是

$(this).append(ui.draggable);

修复了问题......这个小提琴：fiddle

Answer 3

将此css类用于.word：

.word {
    background-color: coral;
    position:absolute;
    margin: 10px;
}

jQuery追错位置

3 个答案: