这是jointjs拖拽树的第一步,画一个导航盒子,从盒子中将元素托到其它地方,如下图,红色框部分为导航处,其它为被托后的元素
代码如下,里面有注释,是哦你感到jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
.drafting_nav{
position: relative;
user-select: none;
}
.drafting_nav .item{
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
background-color: aqua;
cursor: pointer;
}
</style>
</head>
<body>
<!--导航盒子元素被拖动封装-->
<div class="drafting_nav">
<span id="rule_1" class="item">规则1</span>
<span id="rule_2" class="item">规则2</span>
<span id="rule_3" class="item">规则3</span>
</div>
<script>
var treeOperate = {
dragMsg:{
//元素便宜量
deflectX:0,
deflectY:0
}
};
treeOperate.dragNav = function(opt){
//思路
// 1.在元素上按下鼠标,生成一个临时元素
// 2.拖动鼠标,临时元素改变位置
// 3.放开鼠标,根据被选中元素(或者临时元素)进行相应操作
var itemName = opt.draggedItem,
dragBox = opt.dragBox,
//下面这个临时的被拖拽元素
tempEle = null,
//这个position存放被点击元素的position坐标
position = null;
$(document).on('mousedown',itemName,function (e) {
treeOperate.dragMsg.deflectX = e.offsetX;
treeOperate.dragMsg.deflectY = e.offsetY;
//使文本不能被选中
$('body').css('user-select','none');
//下面这些处理视情况而定,就能不触发其它事件了,很好的方式
// $('.show_box').css('pointerEvents','none');
// $('.tree').css('pointerEvents','initial');
position = $(this).position();
tempEle = $(this).clone();
tempEle.addClass('tempRule');
tempEle.css({
position:'absolute',
left:position.left,
top:position.top
});
dragBox.append(tempEle);
//鼠标按下时的初始位置,鼠标拿开时的位置减去初始位置就是移动距离
var initX = e.clientX,
initY = e.clientY;
$(document).on('mousemove',function(e){
//鼠标放开时位置
var curX = e.clientX,
curY = e.clientY;
tempEle.css({
left:curX - initX + position.left,
top:curY - initY + position.top
});
})
});
$(document).on('mouseup',itemName,function(e){
//使文本能被选中
$('body').css('user-select','initial');
$(document).off('mousemove');
});
};
//调用这个函数,传进来的值为父盒子,被拖拽元素的类名
treeOperate.dragNav({
dragBox:$('.drafting_nav'),
//给类名是为了$(document)绑定,可能后来还会新增元素
draggedItem:'.drafting_nav .item'
})
</script>
</body>
</html>
如有建议请告知,多谢