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

Posted 2023-05-08

【中文标题】使用 jQuery UI 拖放：更改拖放的元素

【英文标题】：Using jQuery UI drag-and-drop: changing the dragged element on drop

【发布时间】：2010-11-12 20:18:12

【问题描述】：

在使用 jQuery UI 可拖动和可放置元素时，如何在放置时更改拖放元素？我正在尝试将一个 DIV 拖到另一个可排序的 DIV。在放置时，我想更改放置的 DIV 上的类并更改其 innerhtml 内容。

阅读各种 *** 问题后，我的代码如下所示：

$(".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。

【参考方案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");
);

有几个问题：

drop 事件（您在问题中显示）没有触发，因为您没有accepting 正确的内容。 如果你同时拥有.sortable 和.droppable，你最终会触发奇怪的双重事件。无论如何，这都是不必要的，因为您可以有效地从 sortable 的事件中获取 drop 事件，因为您已将它与可拖动对象链接。

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

【讨论】：

我在 'receive' 事件中尝试了这个，但失败了。感谢您的详细回答！

我也是——这值得两个答案的代表:-)

我三个。让我头疼了两个小时，找不到合适的解释。谢谢@Alconja

感谢 Alconja 的回复 - 为我节省了大量时间！