Question

我正在努力创造一个拖累和放大器下拉界面的图标。基本上，我有三个div容器，每个容器里面都有一个有序列表。第一个列表包含图标（如<li><img /></li>），其余两个图标为空，应接收在其中拖放，删除和排序的图标。每个空列表都与一行显示在前端的行相关联。

我还创建了一个功能，允许在Ctrl / Cmd +鼠标左键单击中选择项目，这样用户就可以一次删除多个图标。

除了一个问题外，一切都按预期工作：自定义Ctrl / Cmd + Click选项停止处理已经删除的可拖动元素。

在意识到之后，我做了一些测试并尽可能地缩小了它：似乎罪魁祸首是'Draggable'功能中的ConnectToSortable参数。如果参数已注释掉，则Ctrl + Click功能将按预期工作。问题是我需要使用此参数来存储与每个空列表（行）关联的所有图标，以便稍后检索它们。

这是我的HTML代码：

<div id="container">
<div id="row1" class="row">
    <ol class="drop-container">
        <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li>
    </ol>
</div>
<div id="row2" class="row">
    <ol class="drop-container">
        <li class='draggable'><span class="squares red-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares red-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares red-squares">&nbsp;</span></li>
    </ol>
</div>
<div id="row3" class="row">
    <ol class="drop-container">
        <li class='draggable'><span class="squares green-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares green-squares">&nbsp;</span></li>
        <li class='draggable'><span class="squares green-squares">&nbsp;</span></li>
    </ol>
</div>

这是我的JS代码：

$(function() {
// Custom function for Ctrl-Cmd Left Mouse Click
$(".draggable, .ui-draggable").click(function(e) {
    if (e.ctrlKey || e.metaKey === true) {
        if (!$(this).hasClass("selected")) {
            $(this).addClass("selected");
        } else {
            $(this).removeClass("selected");
        }
    }
});
// Draggable
$('.draggable').draggable({
    connectToSortable: ".drop-container",
    delay: 200,
    drag: function(event, ui) {
        $(".selected").removeClass("selected");
    },
    helper: "original",
    revert: "invalid",
    revertDuration: 300
});
// Droppable
$('.drop-container').droppable({
    tolerance: "touch"
});
// Sortable
$('.drop-container').sortable({
    appendTo: ".drop-container",
    connectWith: ".drop-container",
    items: ".draggable",
    revert: true
});
// Disable selection of items
$("div, ol, ul, li, span").disableSelection();
});

我做了JSfiddle来测试这个，我能够重现错误。我正在使用跨度而不是实际图像来进行此测试。

我做错了什么或者这是一个jQuery UI错误？任何想法或变通方法都是最受欢迎和赞赏的！

Answer 1

你应该做

$('.drop-container').sortable("refresh");

将项目放入。请参阅：http://jqueryui.com/demos/sortable/#method-refresh

jQuery UI Sortable - ConnectToSortable问题

1 个答案: