js：简单的拖动效果

淩亂°似流年 2022-08-07 10:42 154阅读 0赞

效果演示：[https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/][https_jsfiddle.net_dwqs_b5ywws9f_embedded_result]

html:

<div class="wrap">
        <div id="boxmove" style="left:150px;top:150px;"> movebox </div>
     </div>

css

#boxmove{
            position: absolute;
            width: 200px;
            border:1px solid #ccc;
            height: 200px;
            color: red;
            background-color: blue;
            text-align: center;
            font-size: 30px;
        }

var o,   //捕获到的事件
          X,  //boxmove水平宽度
          Y;  //boxmove垂直高度
    function getObject(obj,e){    //获取捕获到的对象
        o = obj;
        // document.all（IE）使用setCapture方法绑定；其余比如FF使用

//Window对象针对事件的捕捉
        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  
        X = e.clientX - parseInt(o.style.left);   //获取宽度，
        Y = e.clientY - parseInt(o.style.top);   //获取高度，
    }
    document.getElementById("boxmove").onmousedown = function(e){ 
         //boxmove捕获事件并处理  e-->FF  window.event-->IE

getObject(this,e||event);       
    };
    document.onmousemove = function(dis){    //鼠标移动事件处理
        if(!o){  
            return;
        }
        if(!dis){  //事件
            dis = event ;
        }

//设定boxmovebox样式随鼠标移动而改变    o.style.left = dis.clientX - X +"px";

o.style.top = dis.clientY - Y + "px";};

document.onmouseup = function(){

//鼠标松开事件处理

if(!o){ return; }

// document.all（IE）使用releaseCapture解除绑定；

//其余比如FF使用window对象针对事件的捕捉

document.all?o.releaseCapture() : window.captureEvents(

Event.MOUSEMOVE|Event.MOUSEUP)
        o = '';   //还空对象
    };

需要注意的是，因为需要更改div的left和top。这两个属性需要以内联方式给出，否则不行。

原文：[http://www.ido321.com/1489.html][http_www.ido321.com_1489.html]

参考文档：

[https://developer.mozilla.org/en-US/docs/Web/API/Window/captureEvents][https_developer.mozilla.org_en-US_docs_Web_API_Window_captureEvents]

[https://developer.mozilla.org/zh-CN/docs/Web/API/element/setCapture][https_developer.mozilla.org_zh-CN_docs_Web_API_element_setCapture]

[https://developer.mozilla.org/zh-CN/docs/Web/API/Document/releaseCapture][https_developer.mozilla.org_zh-CN_docs_Web_API_Document_releaseCapture]

[https_jsfiddle.net_dwqs_b5ywws9f_embedded_result]: https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/
[http_www.ido321.com_1489.html]: http://www.ido321.com/1489.html
[https_developer.mozilla.org_en-US_docs_Web_API_Window_captureEvents]: https://developer.mozilla.org/en-US/docs/Web/API/Window/captureEvents
[https_developer.mozilla.org_zh-CN_docs_Web_API_element_setCapture]: https://developer.mozilla.org/zh-CN/docs/Web/API/element/setCapture
[https_developer.mozilla.org_zh-CN_docs_Web_API_Document_releaseCapture]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/releaseCapture