JS-拖拽(基本原理实现)

浏览数：25 / 时间：2015年06月09日

主要要点：

1.拖拽3大事件onmousedown，onmousemove，onmouseup

2. 要拖动的物体需要设置成position：absolute，这样在拖拽时改变left和top值才有效

3. onmousemove和up事件应该加在document上

4. 鼠标抬起的时候，清除onmousemove和up事件

技术分享

需要清楚上面途中一些变量的意思

完整测试代码：

<body>
<div id="dragDiv"></div>
</body>
<style>
        #dragDiv{
            width: 100px;height: 100px;
            background: green;
            position: absolute;
        }
</style>

<pre name="code" class="javascript"><script>
        window.onload = function () {
            var oDiv = document.getElementById('dragDiv');

            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function(ev){
                var ev = ev|| window.event;
                disX = ev.clientX - oDiv.offsetLeft;//鼠标按下时光标的x值和 div左边框的距离
                disY = ev.clientY - oDiv.offsetTop; //鼠标按下时光标的x值和 div上边框间的距离
                if(oDiv.setCapture){
                    oDiv.setCapture();// 为了解决IE老版本的bug
                }

                document.onmousemove = function (ev) {
                    var ev = ev || window.event;
                    //拖拽限制范围,
                    var L = ev.clientX- disX;
                    var T = ev.clientY - disY;
                    // 获取浏览器窗口的宽高
                    var clientW = document.documentElement.clientWidth || document.body.clientWidth;
                    var clientH = document.documentElement.clientHeight || document.body.clientHeight;

                    var maxW = clientW-oDiv.offsetWidth; // 可拖拽的最大宽度
                    var maxH = clientH-oDiv.offsetHeight; // 可拖拽的最大高度
                    if(L<0){
                        L = 0;// 当贴住浏览器窗口的左边框就不能再拖了
                    }
                    if(L>maxW){
                        L = maxW; // 当贴住浏览器窗口的右边框就不能再拖了
                    }
                    if(T<0){
                        T = 0;// 当贴住浏览器窗口的上边框就不能再拖了
                    }
                    if(T>maxH){
                        T = maxH; // 当贴住浏览器窗口的下边框就不能再拖了
                    }
                    oDiv.style.left = L +'px';
                    oDiv.style.top = T +'px';
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if(releaseCapture){
                        oDiv.releaseCapture();
                    }
                }
            }
            return false;
        }
</script>

1. 浏览器会有一些默认的行为，会造成拖拽产生bug，所以需要在最后通过return false，阻止浏览器默认行为 



IE8之前版本，选中一些元素之后再进行拖拽，会出现禁止拖拽图标这样的小bug












需要在拖拽时利用setCapture生成一个透明的层










在鼠标抬起后再用releaseCapture释放这个层
















          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            拖拽
            
            drag
            
            拖拽
            
            drag
            
            
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢