jQuery追加错误的位置

Question

I'm trying to order elements from one list into two lists. However, when I drop the element and append it to the target div, the position is very strange (almost random).

<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

The drop function:

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

The following fiddle shows the problem with one target.

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

I'm clueless why this is happening, and I haven't found an answer on SO or on the internet...

Answer 1

I think the position elements are append depends on the position you drop them. I add a div in your html <div id="dropEleme"></div> so the drop elements append there. Also i change a bit your js code to reset style:

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

using

$(this).append(ui);

instead of

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

fixes the problem..here's the fiddle: fiddle

Answer 3

Use this css class for .word :

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