项目拖放w/jQuery更新DOM

Question

我有一个有两列的表.每列都有一个唯一的ID"pick"和"drop".此外,我在第一列中有许多项目.使用jQuery UI draggable/droppable我将项目从第一列(pick)拖到第二列(drop).

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

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和一个leftwith,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());

        }
}});