更新DOM上的项目拖放使用jQuery

Question

我有一个有两列的表。每一列都有一个唯一的ID"pick"one_answers"drop"。我也有一些项目在第一列。使用jQuery UI draggable/dropppable，我将项目从第一列(pick)拖动到第二列(drop)。

当项目被移动时，我需要更新DOM，从"pick"中删除项目并将其添加到"drop"中。我需要有人帮我把它们化成一个函数。该函数将包含在我可以检测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());
        }
}});