jQuery拖拽 -- 3

右边不是滚动盒子，是一个拖拽盒子的话
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        .drafting_box{
            display: flex;
            border: 1px solid #000;
            border-radius: 6px;
            height: 600px;
        }
        .drafting_box .nav_list,
        .drafting_box .show_box{
            height: 100%;
            overflow: hidden;
        }
        .drafting_box .nav_list{
            width: 120px;
            border-right: 1px solid #000;
            padding: 15px;
        }
        .drafting_box .show_box{
            position: relative;
            flex: 1;
        }
        .item{
            display: inline-block;
            padding: 5px 8px;
            background-color: aqua;
            border-radius: 4px;
            cursor: pointer;
            margin: 6px;
        }

        .tree_wrap{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .tree{
            width: 1500px;
            height: 800px;
            position: relative;
        }
        .add{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 40px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: aqua;
            border-radius: 4px;
            cursor: pointer;
        }
        span{
            position: absolute;
            padding: 5px 8px;
            border-radius: 4px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="drafting_box">
    <div class="nav_list ruleList">
        <div class="item" onselectstart="return false">规则1</div>
        <div class="item" onselectstart="return false">规则2</div>
        <div class="item" onselectstart="return false">规则3</div>
    </div>
    <div class="show_box">
        <div class="add" onclick="showScroll()">add</div>

            <div class="tree">

            </div>

    </div>
</div>
<script>
    function showScroll(){
       console.log( $('.tree_wrap').position());
       console.log( $('.tree_wrap').scrollTop());
       console.log( $('.tree_wrap').scrollLeft());
    }
    function createCell(opt){
        console.log(opt);

        var html = $('<span class="cell">'+opt.text+'</span>');
        $('.tree').append(html);
        $(html).css({
            left:opt.x - opt.deflectX,
            top:opt.y - opt.deflectY
        });
    }

    //左侧拖入右侧框框
    (function drag(){
        var position, tempEle,deflectX,deflectY;
        $('.ruleList .item').on('mousedown',function(e){
            console.log(e.target);
            deflectX = e.offsetX;
            deflectY = e.offsetY;
            $('body').attr('onselectstart','return false');
            $('.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
            });
            $('.ruleList').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',function(e){
            console.log($(e.target).hasClass('tree'));
            $('body').attr('onselectstart','return true');
            $('.show_box').css('pointerEvents','initial');

            //根据被拖进来元素生成元素

            //如果临时元素存在，也就是鼠标按下时实在规则元素上
            if(tempEle && tempEle.length>0){
            if($(e.target).hasClass('decision_tree')){
                tree.addCell({
                    text:tempEle.text(),
                    x:e.offsetX,
                    y:e.offsetY,
                    deflectX:deflectX || 0,
                    deflectY:deflectY || 0
                });
            }
            tempEle.remove();
            tempEle = null;
        }
        })
    })();

    //画布拖拽

    function dragEle(opt){
        //可以来点判断，当调用这个函数时输入参数错误时提示
        if(!opt.dragEle){
            console.log('要拖拽的元素是哪个');
        }
        var dragEle = opt.dragEle;
        var dragWrap = opt.dragWrap;

        //原理，点击元素，获取源位置，移动鼠标，获取目标位置，鼠标移动多少元素移动多少
        var sourcePos = {left:0,top:0};
        var targetPos = {left:0,top:0};
        var elePos = {left:0,top:0};
        //元素宽高为了碰撞检测
        var box = {height:dragWrap.height(),width:dragWrap.width()};
        var son = {height:0,width:0};
        dragEle.mousedown(function(event){
            elePos.left = dragEle.position().left;
            elePos.top = dragEle.position().top;
            sourcePos.left=event.pageX;
            sourcePos.top=event.pageY;
            son.width = dragEle.width();
            son.height = dragEle.height();
            $(document).mousemove(function(event){
                targetPos.left = event.pageX;
                targetPos.top = event.pageY;
                //这个elePos为元素位置，点击时获取
                var left = elePos.left + targetPos.left - sourcePos.left;
                var top = elePos.top + targetPos.top - sourcePos.top;
                //碰撞检测
                if(left>0){
                    left = 0;
                }
                if(top>0){
                    top = 0;
                }
                if(left<box.width-son.width){
                    left = box.width-son.width;
                }
                if(top<box.height-son.height){
                    top = box.height-son.height;
                }
                dragEle.css({
                    left: left + 'px',
                    top: top + 'px'
                })
            });
        });
        dragEle.mouseup(function(){
            $(document).off('mousemove');
        });
    }
    dragEle({
        dragEle: $('.tree'),
        dragWrap: $('.show_box')
    });
</script>
</body>
</html>
猜你喜欢
