Question

我有一个有两列的表。每列都有一个唯一的ID“pick”和“drop”。此外，我在第一列中有许多项目。使用jQuery UI draggable / droppable我将项目从第一列（pick）拖到第二列（drop）。

我需要在移动项目时更新DOM，从“pick”中删除项目并将其添加到“drop”。我需要帮助把它全部放入一个函数中。该函数将包含在我可以检测到丢弃的代码的一部分中。

Answer 1

这是我如何做到这一点，它会将被删除元素的父元素更改为它被删除的元素。

$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        $(ui.draggable).appendTo($( this ));
}});

以下是我如何编辑它所以如果它不需要

它就不会运行

$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        if($(ui.draggable).parent() !==$(this)){
            $(ui.draggable).appendTo($( this ));
        }
}});

在考虑了你的新问题后，我认为你应该试试这个。为此，drop列需要top和left position:absolute，并且包含两列的主包装需要position:relative

$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        var $kid = $(ui.draggable);
        var $dad = $(this);
        if($kid.parent() !== $dad)){
            $kid.appendTo($dad);
            $kid.css('left', $kid.left() - $dad.left());
            $kid.css('top', $kid.top() - $dad.top());

        }
}});

使用/ jQuery更新项目拖放时的DOM

1 个答案: