首页 > 代码库 > js:简单的拖动效果
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
js:简单的拖动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。