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。这适用于克隆可拖动，但对于非克隆可拖动，原始拖动仍然存在，所以我最终复制它。

如果我只是将draggable附加到目标droppable，则可以从原始位置删除可拖动的克隆。

修改我发现了问题，我使用的是ui.draggable，它指的是原始的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

您可以在<{em} mousedown来电之前附加.draggable()处理程序来执行此操作，如下所示：

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

Jquery UI draggable：如果Ctrl按下则克隆

1 个答案: