Question

我正在尝试使用JQuery ui和可拖动的，可放置的......

所以我尝试使一些div可拖动，当它们被拖放到droppable元素上时，拖动的元素应该在droppable元素之前附加！所以我有这个基本的HTML：

<div class="container">
    <div class="box" id="1">1</div>
    <div class="box" id="2">2</div>
    <div class="box" id="3">3</div>
</div>
<div class="container">
....

我的代码看起来像这样：

$('.box').wrap("<div class='wrapper'></div>");
$('.box').before("<div class='drop'></div>");
$('.wrapper').draggable();
$('.drop').droppable({
    drop: handleDrop
});

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    draggable.insertBefore($(this));
};

因此，当元素被放置到可放置元素上时，会触发函数handleDrop。如何在代码的末尾看到我尝试在droppable元素之前插入draggable元素：

draggable.insertBefore($(this));

但不知怎的，这不起作用只会产生白色差距：

http://jsfiddle.net/9G9Vf/2/

为什么？

Answer 1

假设您只想附加带有ID的box元素：

$('.box').wrap("<div class='wrapper'></div>");
$('.box').before("<div class='drop'></div>");
$('.wrapper').draggable();
$('.drop').droppable({
    drop: handleDrop
});

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.find('.box').attr('id') + '" was dropped onto me!' );
    draggable.find('.box').insertBefore($(this));
};

http://jsfiddle.net/9G9Vf/6/

<强>更新

如果您想同时附加.box和droppable：

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert(ui.draggable.html());
    alert( 'The square with ID "' + draggable.find('.box').attr('id') + '" was dropped onto me!' );
    draggable.children().insertBefore($(this));
};

http://jsfiddle.net/9G9Vf/7/

可拖动元素消失

1 个答案: