Я пытаюсь создать интерфейс перетаскивания для иконок.По сути, у меня есть три контейнера div, каждый с упорядоченным списком внутри.Первый список содержит значки (как <li><img /></li>), а два оставшихся - пустые и должны получать значки, перетаскиваемые и сортируемые внутри них.Каждый пустой список связан со строкой, в которой значки будут отображаться в интерфейсе.
Я также создал функцию, позволяющую выбирать элементы по Ctrl / Cmd + щелчок левой кнопкой мыши, чтобы пользователи могли отбрасывать несколькозначки за раз.
Все работает, как и ожидалось, за исключением одной проблемы: пользовательская опция Ctrl / Cmd + Click перестает работать с перетаскиваемыми элементами, которые уже были удалены.
После реализации,Я провел некоторое тестирование и максимально сузил его: кажется, что виновником является параметр ConnectToSortable в функции Draggable.Если параметр закомментирован, функция 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?Любые идеи или обходные пути приветствуются и приветствуются!