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