js:简单的拖动效果

页面导航:首页 > 网络编程 > JavaScript > js:简单的拖动效果

js:简单的拖动效果

来源: 作者: 时间:2016-02-02 09:58 【

html:moveboxcss boxmove{ position: absolute; width: 200px; border:1px solid ccc; height: 200px; colo

 

:


movebox

 

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

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<