1. 程式人生 > >js:簡單的拖動效果

js:簡單的拖動效果

p s move ntb rec cti release 樣式 left eve

效果演示: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; }

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。

這兩個屬性須要以內聯方式給出,否則不行。

原文: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

js:簡單的拖動效果