使用 jQuery UI 拖放：更改拖放的元素

Question

在使用 jQuery UI 可拖动和可放置元素时，如何在放置时更改拖放元素？我正在尝试将一个 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. drop 事件（您在问题中显示）没有触发，因为您没有accepting 正确的内容。
2. 如果你同时拥有.sortable 和.droppable，你最终会触发奇怪的双重事件。无论如何，这都是不必要的，因为您可以有效地从 sortable 的事件中获取 drop 事件，因为您已将它与可拖动对象链接。

需要注意的另一件事 - 使用 sortable 的 receive 事件而不是 stop 会更好（因为每次排序停止时都会触发 stop 并且当您丢弃新项目时会专门触发接收进入排序列表），但它不能正常工作，因为item 尚未添加到可排序列表中，因此您此时无法更改它。它在停止时可以正常工作，只是因为其他可排序项目都没有elemtxt 类。