使用光标(套索)绘制一个框将在此JSFiddle example中选择多个.item.
选定的.item变得可以拖延.没有.item的空.slot是有效的droppable.
当您在多个droppable上放置多个draggable时,只有相应的droppable无效时,只有.item哪个鼠标处于打开状态.
如果删除无效的droppable,如何使每个draggable revert？
使用Javascript：
$(function () {
// we are going to store the selected objects in here
var selected = $([]),total = [],offset = {
top: 0,left: 0
};
$(document).selectable({
filter: ".item",start: function (event,ui) { //remove draggable from selection,otherwise prevIoUs selection will still be draggable.
$(total).draggable("destroy");
},selected: function (event,ui) { // push selected into total[].
total.push(ui.selected)
},unselected: function (event,ui) { //console.log('unselect ui: ',ui)
u = ui.unselected
//remove unselected from selection[].
total = jQuery.grep(total,function (n) {
return n !== u
});
//console.log('total array (unselected): ',total)
},stop: function (vent,ui) {
//remove duplicated element from total[].
jQuery.unique(total)
$(total).each(function () {
$(this).draggable(dragOption)
})
//$(total).draggable(dragOption);
//var widget = $( ".selector" ).draggable( "widget" );
//console.log('widget: ',widget)
console.log('break line---------------------------- ')
}
});
//save drag option as an Obj.
dragOption = {
opacity: 0.45,delay: 300,connectToSortable: ".slot"
//,helper: "clone",distance: 5,snap: ".slot",snapMode: "inner",revert: "invalid",ui) {
console.log('draggable start ui: ',ui)
selected = $(total).each(function () {
var el = $(this);
el.data("offset",el.offset())
});
offset = $(this).offset(); //get coordinates relative to document
},drag: function (event,ui) { //console.log(offset.top)
var dt = ui.position.top - offset.top,dl = ui.position.left - offset.left;
selected.not(this).each(function () {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected,before drag
var el = $(this),off = el.data("offset");
el.css({
top: off.top + dt,left: off.left + dl
});
});
},stop: function (event,ui) {
console.log('drag stop ui : ',ui)
}
};
//save drop option as an Obj.
dropOption = {
accept: '.item',drop: function (event,ui) {
console.log('drop event : ',event);
console.log('drop ui : ',ui)
},activate: function (event,ui) { //console.log('this : ',this,'\n ui : ',out: function (event,ui) { //console.log('out',$(this))
},deactivate: function (event,ui) { //console.log('deactivate')
},tolerance: "intersect",instance: function (event,ui) { //console.log('instance ui : ',over: function (event,ui) { //console.log('this item : ',ui.draggable[0],'on this slot: ',this)
},activeClass: "green3"
}
// make empty slot droppable
$(".slot:not(:has(>div))").droppable(dropOption)
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
