0
我正在做一个拖拽&拖放页面,它允许用户从源列表中选择字段并将它们放入选择的目标列表中。jQuery多选可拖拽/可排序
虽然此功能在高层次上工作,但我试图通过允许同时选择多个字段并移动,使体验更好一些。
可排序:
$('#in_available_fields').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
start: function(event, ui) {
if (!$(ui.item).hasClass("allowPrimary")) {
$(".primaryPanel").removeClass('panel-primary').addClass("panel-danger");
}
if (!$(ui.item).hasClass("allowSecondary")) {
$(".secondaryPanel").removeClass('panel-primary').addClass("panel-danger");
}
if (!$(ui.item).hasClass("allowExport")) {
$(".exportPanel").removeClass('panel-primary').addClass("panel-danger");
}
checkFields()
},
....
悬浮窗:
// Enable dropzone for primary fields
$('.primaryDropzone').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
receive: function(event, ui) {
// If we dont allow primary fields here, cancel
if (!$(ui.item).hasClass("allowPrimary")) {
$(ui.placeholder).css('display', 'none');
$(ui.sender).sortable("cancel");
}
},
over: function(event, ui) {
if (!$(ui.item).hasClass("allowPrimary")) {
$(ui.placeholder).css('display', 'none');
} else {
$(ui.placeholder).css('display', '');
}
},
....
我的想法,要清楚用户将是对每个字段的标签前添加一个复选框。这样他们可以一次检查多个,然后当他们拖动它们时,它将移动所有选定的部分。
任何想法的最佳方法来解决这个问题?我努力通过拖放来实现这一目标,我对如何为此提供多选功能还有点不确定。
小提琴:https://jsfiddle.net/839rvq2k/