使用jq-ui实现选中多元素进行拖拽操作

开发中为了方便用户想引入拖拽操作，但发现jq只支持单个节点拖拽，google百度了半天只有几个实现了多选拖拽了例子，但感觉不是很好用，所以干脆利用晚上时间自己写了个demo实现此功能。

思路及代码

想要实现多选拖拽功能，首先想到的肯定还是jq-ui，毕竟这有现成的多选功能和单个拖拽功能。但实现过程中发现 jq-ui的选中功能似乎和拖拽功能有冲突。所以决定舍弃了选中功能，只取它的拖拽功能，选中功能由自己实现。

选择元素功能比较简单，用一个class标识这个元素是否被选中，点击空白处取消所有选中，按ctrl可以多选不连续的元素都很简单。至于同时拖拽多个元素的原理采用的是元素之间的联动，被拖拽的可以是被选中的任意一个元素，拖拽此元素会联动其他选中元素改变位置，具体通过jq-ui拖拽方法内置的事件实现。
在start方法里计算出被拖拽元素和其他选中元素之间的偏差，存储在变量里，这里采用的不是top和left来计算，而是用offsetTop和offsetLeft，这是距离包裹元素的左上角距离。
在拖动过程的事件方法里实时改动其他元素的位置，具体位置为拖动元素位置+相对偏移位置。 OK到这里大功告成。如果要再完美点，可以在取消选中的时候将存储的偏移量删除。
以下是这次的demo代码。demo由于只是尝试思路比较简陋，勿怪！

demo示例

<!DOCTYPE html>
<html>
<head>
<title>testPolicy.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
#collect {height: 500px;width: 500px;background-color: gray;margin-left: 30%;z-index: 99;
}.ui-selecting {background: #FECA40;
}.ui-selected {background: #F39814;color: white;
}.drag {height: 30px;width: 30px;border: 2px solid;margin: 2px 2px 2px 2px;display: inline-block;z-index: 101;
}.dragg {
margin-left: 30%;position: absolute;height: 500px;width: 500px;border: 1px solid;z-index: 100;
}
</style></head><body><div id="collect"><div id="1" name="a" class="drag">1</div><div id="2" name="a" class="drag">2</div><div id="3" name="a" class="drag">3</div><div id="4" name="a" class="drag">4</div><div id="5" name="a" class="drag">5</div><div id="6" name="a" class="drag">6</div><div id="7" name="a" class="drag">7</div><div id="8" name="a" class="drag">8</div><div id="9" name="a" class="drag">9</div><div id="0" name="a" class="drag">0</div></div></body><script type="text/javascript">// 存放各div相对于被拖拽者的偏差 var topList={};var leftList={};$(function() {//初始化可拖拽$(".drag").draggable({start:function(a,b){//拖拽开始初始化偏移量var t0=$(this).context.offsetTop;var h0=$(this).context.offsetLeft;var arr=$(".ui-selected").toArray();for ( var i = 0; i < arr.length; i++) {$a=$(arr[i]);if($a.context.id==$(this).context.id){continue;}var t1=$a.context.offsetTop;var h1=$a.context.offsetLeft;topList[$a.context.id]=t1-t0;leftList[$a.context.id]=h1-h0;}},drag : function(a,b,c) {//拖拽过程根据偏移量不同分别设置位置var t0=$(this).context.offsetTop;var h0=$(this).context.offsetLeft;var arr=$(".ui-selected").toArray();for ( var i = 0; i < arr.length; i++) {$a=$(arr[i]);if($a.context.id==$(this).context.id){continue;}var t=topList[$a.context.id];var h=leftList[$a.context.id];$a.offset({"top":t0+t,"left":h0+h});}}});//点击加样式 代表被选中$(".drag").bind("click",function(e){var ct=$(this).context;$(this).toggleClass("ui-selected");if(!keepCtrl){$(".ui-selected:not(#"+ct.id+")").removeClass("ui-selected");}})//点击外面清除选中元素 名称a是可拖拽元素的标识 .ui-selected 是选中的样式$(document).bind("click",function(e){var ct=$(e.target).attr("name");if(ct!="a"){$(".ui-selected").removeClass("ui-selected");}})//以下保持按Ctrl时候能多选var keepCtrl=false;$(document).bind("keydown",function(e){if(e.keyCode=17){keepCtrl=true;}});$(document).bind("keyup",function(e){if(e.keyCode=17){keepCtrl=false;}});});
</script>
</html>