Jquery UI draggable:按下Ctrl时克隆

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

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

我的代码到目前为止,只缺少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);
        }
    });

在我粘贴到这里的代码中,我创建了一个新元素,然后附加到dropable。这对于克隆可拖动项很好,但是对于非克隆可拖动项,原始可拖动项仍然保留,因此我最终复制了它。

如果我只是将draggable附加到目标dropable,克隆draggable就会从原来的位置移除。

我发现了问题,我在用ui.draggable可拖动,它指的是原始的可拖动,而不是用户界面帮助程序指的是克隆的那个。我在此添加最终的工作代码作为参考:

$(".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);
        }
    });