【发布时间】：2012-03-06 15:30:20
【问题描述】：
我正在尝试为图标创建拖放界面。基本上，我有三个 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"> </span></li>
<li class='draggable'><span class="squares blue-squares"> </span></li>
<li class='draggable'><span class="squares blue-squares"> </span></li>
</ol>
</div>
<div id="row2" class="row">
<ol class="drop-container">
<li class='draggable'><span class="squares red-squares"> </span></li>
<li class='draggable'><span class="squares red-squares"> </span></li>
<li class='draggable'><span class="squares red-squares"> </span></li>
</ol>
</div>
<div id="row3" class="row">
<ol class="drop-container">
<li class='draggable'><span class="squares green-squares"> </span></li>
<li class='draggable'><span class="squares green-squares"> </span></li>
<li class='draggable'><span class="squares green-squares"> </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 错误？任何想法或解决方法都非常欢迎和赞赏！
【问题讨论】：
标签： jquery-ui jquery-ui-sortable jquery-ui-draggable