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");
});

有几个问题：

放弃事件（您在问题中显示）未被触发，因为您没有accept正确的内容。
如果您同时拥有.sortable＆amp; .droppable你最终会发生奇怪的双重事件。这是不必要的，因为你可以有效地从sortable事件中获取drop事件，因为你已经将它与draggable链接了。

另外需要注意的一点是 - 使用可排序的receive事件而不是stop会更好（因为每次任何排序停止时都会触发停止，并且当特定的触发时，停止会被触发您将新项目放入排序列表中），但它无法正常工作，因为item尚未添加到可排序列表中，因此您无法在此时更改它。它只在因为没有其他可排序的项目具有elemtxt类而在停止时正常工作。

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

1 个答案: