Javascript实现简单的拖动效果

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;
    }

js

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){ 

    getObject(this,e||event);       //boxmove捕获事件并处理  e-->FF  window.event-->IE

};

document.onmousemove = function(dis){    //鼠标移动事件处理

    if(!o){  

        return;

    }

    if(!dis){  //事件

        dis = event ;

    }

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

    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。这两个属性需要以内联方式给出，否则不行。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索对象
事件
js实现拖动效果、js实现div拖动效果、js实现图片拖动效果、div实现上下拖动效果、js实现地图拖动效果，以便于您获取更多的相关知识。