节点拖拽

来源：互联网发布：战网客户端mac版下载编辑：程序博客网时间：2024/05/21 22:46

之前的事件绑定有个错误，如果在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;                    }            })        }

阅读全文

0 0