以下の機能が必要です
- jquery uiのselectablesと同様に、マウスのドラッグとctrlキーでリストからアイテムを選択します。
- 一度に複数のアイテムをドラッグできる必要があります。
オペレーティング システムのドラッグ アンド ドロップ機能に似たアプリケーションが必要です。
私の問題は、マウスポインターアイテムがドラッグしている複数のアイテムを選択したい場合、それを解決する方法です。
コードを使用しようとしましたが、複数のアイテムを選択する際にいくつかの欠陥があります。
$(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 });
}
});
});