Обновление DOM при перетаскивании элемента с помощью jQuery

Question

У меня есть таблица с двумя столбцами.Каждый столбец имеет уникальный идентификатор «выбрать» и «сбросить».Также у меня есть ряд предметов в первом столбце.Используя jQuery UI, перетаскиваемый / сбрасываемый, я перетаскиваю элементы из первого столбца (выбор) во второй (удаление).

Мне нужно обновить 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 и 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());

        }
}});