Jquery UI 可拖动：如果按下 Ctrl 则克隆

Posted 2023-05-08

【中文标题】Jquery UI 可拖动：如果按下 Ctrl 则克隆

【英文标题】：Jquery UI draggable: clone if Ctrl pressed down

【发布时间】：2011-04-04 18:15:46

【问题描述】：

我有一个可拖动的表格单元格列表，可以拖放到第二个表格上。它们被设置为克隆，因为如果从中拖动项目，原始表应该保持不变。

现在我希望能够将第二个表格中的已删除元素从一个单元格移动到另一个单元格。但是，如果在第二个表格内拖动元素时按下 Control 键，则应该克隆该元素。现在我不知道如何优雅地实现最后一部分。

我的代码到目前为止，只有 Ctrl 部分的克隆丢失：

$(".drag_clone").draggable(helper: "clone");
$(".draggable").draggable(revert: "invalid");
$(".droppable").droppable(
    
        drop: function(event, ui) 
            if (ui.draggable.hasClass("draggable")) 
                ui.draggable.remove();
            
            $('<div class="draggable"></div>').text(ui.draggable.text()).draggable(revert: "invalid").appendTo(this);
        
    );

我想要实现的行为是，如果一个元素被拖到表格的另一个单元格，它应该被移动到那里。如果在按住 Ctrl 键的同时拖动元素，或者如果它是几个应始终克隆的预定义元素之一，则应创建该元素的副本并将其插入目标单元格。

在我粘贴在这里的代码中，我正在创建一个新元素，然后将其附加到 droppable 中。这适用于克隆可拖动对象，但对于非克隆可拖动对象，原始可拖动对象仍然存在，所以我最终复制了它。

如果我只是将可拖动对象附加到目标可放置对象，则克隆可拖动对象将从其原始位置移除。

编辑： 我发现了问题，我使用的是 ui.draggable，它指的是原始的可拖动，而不是 ui.helper，它指的是克隆的。我在这里添加最终的工作代码作为参考：

$(".drag_clone").draggable(helper: "clone");
$(".draggable").draggable(revert: "invalid");
$(".droppable").droppable(
    
        hoverClass: 'ui-state-hover',
        drop: function(event, ui) 
            ui.helper.remove()
            $('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event) 
                $(this).draggable('option', 
                         helper : event.ctrlKey ? 'clone' : 'original' );
                         ).draggable( revert: "invalid" ).appendTo(this);
        
    );

【参考方案1】：

您可以通过在.draggable() 调用之前附加mousedown 处理程序来做到这一点，如下所示：

$(".draggable").mousedown(function(event) 
  $(this).draggable('option',  helper : event.ctrlKey ? 'clone' : 'original');
).draggable( revert: "invalid" );

You can see it in action here，因为小部件也适用于mousedown，我们只想在小部件的处理程序之前附加一个事件处理程序，因为事件处理程序按绑定的顺序运行，所以我们所有正在做的是在拖动开始之前设置helper option。

【讨论】：

谢谢，这可以很好地启用克隆模式。但是现在我遇到的问题是，当我删除可拖动对象时，这也会删除克隆可拖动对象。我似乎找不到区分普通可拖动和克隆可拖动的方法。

@F*** - 我不确定你到底在追求什么行为，你能解释一下删除克隆与非克隆时会发生什么吗？

我试图更好地解释我在原始问题中寻找的内容。

我已经解决了这个问题，我在应该使用 ui.helper 的地方使用了 ui.draggable。