js:简单的拖动效果

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

上一篇:laytpl.js 模板使用记录


下一篇:Java传参都是传引用变量的副本