节点拖拽

之前的事件绑定有个错误，如果在div 范围外抬起鼠标，布局会乱，up 里的操作没执行，经过研究学习，改了一下

这里写图片描述

html

//oncontextmenu  阻止鼠标右键 弹出菜单
<body oncontextmenu="return false" >
1213213
//onselectstart  阻止鼠标左键 选中文本，
<div id="box" onselectstart="return false">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>
</body>

css

*{
            margin:0;
            padding:0;
            list-style: none;
        }
        #box{
            margin:0 auto;
            width:100px;
            height:200px;
            margin-top: 20px;
            position: relative;
        }
        li{
            width:60px;
            height:50px;
        }

var div=$('#box');

        ddd(div,'li');
        function ddd(element,childer){
            element.on('mousedown',childer,function(event){
                var e=event || window.event;
                if(e.button==3){
                    return false;
                }
                //声明变量lls  接当前点击的对象  以备后续使用，因为后面的move 和 up 事件是绑定在document 上的，无法直接使用this 所以在这里接一下
                var lls=$(this);
                var height=parseInt(lls.css('height'));
                //将节点设置定位脱离文档流，可以更直观的看到节点的移动
                lls.css({'position':'absolute','z-index':999,'top':lls.index()*height,'opacity':0.7});
                    var divy= e.clientY;
                    var bli=lls.siblings();
                    var num=0;
                    var tp=parseInt(lls.css('top'));
                    var newnum=0;
                    //将move 事件绑定在document上，因为，如果绑定在元素上面，鼠标移出元素范围就无法再计算
                    document.onmousemove=function(event){
                        var e=event || window.event;
                        num= e.clientY-divy;
                        newnum=tp+num;
                        if(newnum<=0){
                            newnum=0;
                        }else if(newnum>=bli.length*height){
                            newnum=bli.length*height;
                        }
                        lls.css('top',newnum);
                        for(var i=0;i<bli.length;i++){
                            if(newnum>=(i*height) && newnum<=((i+1)*height)){
                                bli.eq(i).css('border-top','2px solid blue');
                                bli.eq(i).siblings().css('border-top','');
                            }
                        }

                    }
                    //将抬起事件绑定在 document上面，如果绑定在元素上面，鼠标移出 元素父级范围后抬起，里面的操作就不执行，布局就会乱了
                    document.onmouseup=function(){
                    //这里判断鼠标有没有移动过，如果没有移动过就直接return
                        if(num==0){
                            lls.css({'position':'','z-index':'','top':'','opacity':''});
                            document.onmousemove=document.onmouseup=null;
                            return false;
            //把操作的当前节点删除掉并用 removeli 接住
                        var removeli=lls.remove();
                        //遍历当前节点的 兄弟节点，
                        for(var i=0;i<bli.length;i++){
                        //判定如果符合条件就将刚刚删除的节点从新添加到该节点的前面，并将所有节点的布局重置掉。
                            if(newnum>=(i*height) && newnum<=((i+1)*height)){
                                bli.eq(i).before(removeli);
                                lls.css({'position':'','z-index':'','top':'','opacity':''});
                                lls.siblings().css('border-top','');
                            }
                        }
                        //清除掉move和up 事件
                        document.onmousemove=document.onmouseup=null;
                    }

            })


        }

猜你喜欢