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

Question

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

现在我希望能够将第二个表格中的已删除元素从一个单元格移动到另一个单元格。但是，如果在第二个表格内拖动元素时按下 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);
        }
    });

Answer 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。