拖拽 1

这是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>
如有建议请告知，多谢
猜你喜欢
