js：简单的拖动效果_x = e.clientx - parseint(popdiv.style.left);-优快云博客

本文链接：https://blog.youkuaiyun.com/u011043843/article/details/44778377

本文介绍了一个简单的拖拽效果实现方案，通过HTML、CSS和JavaScript来完成元素的拖拽功能。文章详细展示了如何设置HTML结构、定义CSS样式以及编写JS代码以响应鼠标事件，最终实现了元素随着鼠标移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果演示：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

参考文档：

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/Document/releaseCapture