使用jQuery UI拖放:在drop上更改拖动的元素

Question

使用jQuery UI draggables和droppables时,如何在drop上更改拖放的元素？我试图将一个DIV拖动到另一个可排序的DIV.在删除时,我想更改已删除的DIV上的类并更改其innerHTML内容.

在阅读各种StackOverflow问题后,我的代码如下所示:

$(".column").droppable({
  accept: '.element-dragging', 
    drop: function(event, ui) {
        if ($(ui.draggable).hasClass("elemtxt")) {
            $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>');
        }
    }
})

它不适合我.:-(

我的代码的完整副本位于http://www.marteki.com/jquery/bugkilling.php.

Answer 1

从您提供的链接中获取完整的JavaScript代码,您可以按如下方式更改它以使其工作:

$(function() {
    $(".elementbar div").draggable({
        connectToSortable: '.column',
        cursor: 'move',
        cursorAt: { top: 0, left: 0 },
        helper: 'clone',
        revert: 'invalid'
    });
    $(".elementbar div, .elementbar div img").disableSelection();
    $(".column").sortable({
        connectWith: '.column',
        cursor: 'move', 
        cursorAt: { top: 0, left: 0 }, 
        placeholder: 'ui-sortable-placeholder',
        tolerance: 'pointer',
        stop: function(event, ui) {
            if (ui.item.hasClass("elemtxt")) {
                ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>');
            }
        }
    });
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
});

有几个问题:

1. 丢弃事件(您在问题中显示)未被触发,因为您没有accept正确的内容.
2. 如果你有两个.sortable&.droppable你最终发生奇怪的双重事件.这是不必要的,因为你可以有效地从sortable事件中获取drop事件,因为你已将它与draggable链接.

还有一点需要注意 - 使用sortable的receive事件而不是更好stop(因为每当任何排序停止和接收时,当你将新项目放入排序列表时,就会触发停止),但它没有由于item尚未添加到可排序列表中,因此无法正常工作,因此您无法在此时更改它.它在停止时工作正常,因为没有其他可排序的项目具有elemtxt该类.