我正在寻找一个包含许多项目的 Web 界面,这些项目可以选择并拖动以定位它们,无论是分组还是单独。真的很像 Windows 桌面。
我们已经在使用 JQuery,所以添加它是首选。JQuery UI Draggables 和 Selectables 单独完成了我们想要的大部分工作,但并没有真正协同工作以提供我们正在寻找的那种效果。
我完全被 JQ 插件网站弄得不知所措(它的“流行”算法似乎不是很有用),并且欢迎提供有关避免大量车轮改造的最佳方法的指导,因为我猜这个比喻有已经完成了。
我也需要做同样的事情,我不想使用 eyecon.ro 的界面扩展。经过一番研究,我发现Combining Selectables And Draggables Using jQuery UI。讲得很好,但是要使代码片段运行,您必须深入研究它。我能够让它工作。我稍微改变了它,这是我完成它的方法。它需要修改才能在生产级别使用,但我希望它有所帮助。
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
// initiate the selectable id to be recognized by UI
$("#selectable").selectable({
filter: 'div',
});
// declare draggable UI and what we are going to be doing on start
$("#selectable div").draggable({
start: function(ev, ui) {
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
if( !$(this).hasClass("ui-selected")) $(this).addClass("ui-selected");
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
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});
});
}
});
CSS Styles 能够看到正在发生的事情:
#selectable { width: 100%; height: 100%;}
#selectable div {
background: #ffc;
line-height: 25px;
height: 25px;
width: 200px;
border: 1px solid #fcc;
}
#selectable div.ui-selected {
background: #fcaf3e;
}
#selectable div.ui-selecting {
background: #8ae234;
}
HTML 标记:
<div id="selectable">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
</div>
这个问题是相关的,但已经过时了;答案也是如此。 这是@idFlood 的 jsfiddle的更新版本,适用于 jQuery 1.9.1 + jQueryUI 1.10.3:
// store selected elements and the offset of the dragged element
var selected = $([]), offset = {top:0, left:0};
$( "#selectable > div" ).draggable({
start: function (event, ui) {
var $this = $(this);
if ($this.hasClass("ui-selected")) {
// if this is selected, attach current offset
// of each selected element to that element
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
} else {
// if this is not selected, clear current selection
selected = $([]);
$( "#selectable > div" ).removeClass("ui-selected");
}
offset = $this.offset();
},
drag: function (event, ui) {
// drag all selected elements simultaneously
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
selected.not(this).each(function() {
var $this = $(this);
var elOffset = $this.data("offset");
$this.css({top: elOffset.top + dt, left: elOffset.left + dl});
});
}
});
// enable marquee selecting and deselect on outside click...
$( "#selectable" ).selectable();
// ...but manually implement selection to prevent interference from draggable()
$( "#selectable" ).on("click", "div", function (e) {
if (!e.metaKey && !e.shiftKey) {
// deselect other elements if meta/shift not held down
// $( "#dc-modules .dc-module" ).removeClass("ui-selected");
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selected");
} else {
if ($(this).hasClass("ui-selected")) {
$(this).removeClass("ui-selected");
} else {
$(this).addClass("ui-selected");
}
}
});
我遇到了 _mouseStop() 调用引发错误的问题,因此我将其删除;这意味着ui-selecting
状态不再发生在点击时,但所有其他功能保持不变。
我对 Sinan Yasar 给出的答案做了一些修改。它并不完美,但它已经表现得更像我除了。
一个主要的附加功能是调用 select 的单击侦听器。
// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("selectable")._mouseStop(null);
});
您可以在这里看到一个完整的工作示例:http: //jsfiddle.net/DXrNn/4/
还有一个 jquery-ui 插件可以做到这一点:http ://code.google.com/p/jqdragdropmultiselect/ 问题是它看起来没有维护。
编辑:如果您定义了可拖动的“过滤器”选项,则需要在 selectable._mouseStop(null) 之前调用 selectable.refresh()。
$( "#selectable > div" ).click( function(e){
...
var selectable = $("#container").data("selectable");
selectable.refresh();
selectable._mouseStop(null);
...
还有另一种方式,可能是我用过的更简洁的方式。子元素是被选择者,父元素将具有“ui-selectable”类。
$("#parentContainer").selectable({
selected: function(event, ui) {
let selected = ui.unselected.id;
document.getElementById(selected).style.border = '1px solid blue'
}
unselected: function(event, ui) {
let unselected = ui.unselected.id;
document.getElementById(unselected).style.border = ''
$('#'+unselected).draggable('destroy')
}
})
document.getElementbyId('childElement').addEventListener('mousedown', function() {
$(this).draggable({
cursor: crosshair
})
})