Я использую этот метод http://jqueryui.com/demos/sortable/#connect-lists для подключения двух списков, которые у меня есть. Я хочу, чтобы иметь возможность перетащить из списка A в список B, но когда элемент отбрасывается, мне нужно сохранить исходный файл еще в списке A. Я проверил параметры и события, но я считаю, что нет ничего подобного. Любые подходы?
Как дублировать элемент при использовании сортировки jquery?
Ответ 1
Для начала просмотрите это и прочитайте также ответ @Erez.
$(function () {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
remove: function (event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).sortable('cancel');
}
}).disableSelection();
$("#sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
Ответ 2
$("#sortable1").sortable({
connectWith: ".connectedSortable",
forcePlaceholderSize: false,
helper: function (e, li) {
copyHelper = li.clone().insertAfter(li);
return li.clone();
},
stop: function () {
copyHelper && copyHelper.remove();
}
});
$(".connectedSortable").sortable({
receive: function (e, ui) {
copyHelper = null;
}
});
Ответ 3
Решение Erez работает для меня, но я обнаружил, что его отсутствие инкапсуляции расстраивает. Я бы предложил использовать следующее решение, чтобы избежать использования глобальных переменных:
$("#sortable1").sortable({
connectWith: ".connectedSortable",
helper: function (e, li) {
this.copyHelper = li.clone().insertAfter(li);
$(this).data('copied', false);
return li.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#sortable2").sortable({
receive: function (e, ui) {
ui.sender.data('copied', true);
}
});
Здесь jsFiddle: http://jsfiddle.net/v265q/190/
Ответ 4
Я знаю, что это старо, но я не мог заставить Эрез ответить на работу, и Торстен не сократил его для проекта, в котором я нуждаюсь. Это похоже на то, как мне нужно:
$("#sortable2, #sortable1").sortable({
connectWith: ".connectedSortable",
remove: function (e, li) {
copyHelper = li.item.clone().insertAfter(li.item);
$(this).sortable('cancel');
return li.clone();
}
}).disableSelection();
Ответ 5
Ответ abuser2582707 работает лучше всего для меня. За исключением одной ошибки: вам нужно изменить возврат на
return li.item.clone();
Итак, это должно быть:
$("#sortable2, #sortable1").sortable({
connectWith: ".connectedSortable",
remove: function (e, li) {
li.item.clone().insertAfter(li.item);
$(this).sortable('cancel');
return li.item.clone();
}
}).disableSelection();
Ответ 6
При использовании решения Erez, но для подключения 2 сортируемых портлетов (основой был пример кода портлета из http://jqueryui.com/sortable/#portlets), переключатель на клон не сработает. Я добавил следующую строку перед 'return li.clone();' чтобы он работал.
copyHelper.click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
Мне потребовалось некоторое время, чтобы понять, поэтому я надеюсь, что это поможет кому-то.