结合jQuery UI的可拖动，可选择和可放置

Question

我正在尝试将jQuery UI的可拖动，可放置，可选择和可排序的库组合在一起，以创建用于拖动选择元素并将其放入另一个区域的Web界面。用户可以根据需要从可放置区域中删除项目，还可以控制/ cmd +单击以选择特定项目而不拖动。

到目前为止，我已经做了相当不错的努力，但是在将“已删除”的项目添加回可选项目的原始列表时，我遇到了问题。拖动选择适用于这些项目（动态重新创建），但我的主要问题是当控制/ cmd +一旦将项目添加回原始列表后单击项目。

要重新创建问题，请将项目添加到第二个可放置区域，然后将其删除（通过单击它们）。一旦项目返回原始列表，控制/ cmd +单击您删除的项目不会正确选择它们，因此当您拖动这些项目时，只会添加一项（而不是正确的数量）。

这是一个jsfiddle：http://jsfiddle.net/b8key7Lw/

这是代码，我很难在#selectable＆gt;开始工作。 div项是动态创建的（在jsfiddle的第45行左右）：

$("body").on("click", "#selectable > div", function(e){
    if (e.metaKey == false) {
        $( "#selectable > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            $(this).removeClass("ui-selected");
        }
        else {
            $(this).addClass("ui-selecting");
        }
    }
    $( "#selectable" ).data("ui-selectable")._mouseStop(null);
});