我想实现一个网络界面与许多项目，可以选择和拖动来定位他们，组或单独。而是像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样式，以便能够看到发生了什么：
#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>
