6

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

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

1 回答 1

15

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

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

你可以在这里看到它的作用，因为小部件也可以工作mousedown，我们只想在小部件的处理程序之前附加一个事件处理程序，因为事件处理程序按照绑定的顺序运行，所以我们所做的就是在拖动开始。helper

于 2010-08-27T11:49:27.357 回答