我需要以下功能
>通过鼠标拖动和cntrl键从列表中选择项目,类似于jquery ui selectables.
>一次应该可以拖动多个项目.
我需要类似于操作系统拖放功能的应用程序.
我的问题是,如果我想选择拖动鼠标指针项的多个项目,如何解决它.
我试图使用代码,但它在选择多个项目时有一些缺陷.
$(document).ready(function(){
var selectedClass = 'ui-state-highlight',clickDelay = 600,// click time (milliseconds)
lastClick,diffClick; // timestamps
$("#draggable li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup',function(e){
if (e.type=="mousedown") {
lastClick = e.timeStamp; // get mousedown time
} else {
diffClick = e.timeStamp - lastClick;
if ( diffClick < clickDelay ) {
// add selected class to group draggable objects
$(this).toggleClass(selectedClass);
}
}
})
.draggable({
revertDuration: 10,// grouped items animate separately,so leave this number low
containment: '.demo',start: function(e,ui) {
ui.helper.addClass(selectedClass);
},stop: function(e,ui) {
// reset group positions
$('.' + selectedClass).css({ top:0,left:0 });
},drag: function(e,ui) {
// set selected group position to main dragged object
// this works because the position is relative to the starting position
$('.' + selectedClass).css({
top : ui.position.top,left: ui.position.left
});
}
});
$("#droppable,#draggable")
.sortable()
.droppable({
drop: function(e,ui) {
$('.' + selectedClass)
.appendTo($(this))
.add(ui.draggable) // ui.draggable is appended by the script,so add it after
.removeClass(selectedClass)
.css({ top:0,left:0 });
}
});
});
解决方法
这是多选拖动的演示
Demo
只需使用可选插件即可选择多个项目
$(".itemlist").selectable({filter:"li"});