使用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>