常见问题当前位置:万彩娱乐平台 > 常见问题 > >

万彩娱乐平台一起来写段JS drag拖动代码

  

[JS,drag]一起来写段JS drag拖动代码

  1、为要被拖移三个事件,onmousedown,onmousemove,onmouseup  
2、在onmousemove事件中来处理被拖移元素的位置的变化,其实说白了元素要移动的距离就是鼠标两次移动之间的距离。

  
3、其中还包括setCapture,releaseCapture,目的就是为了被搬移的元素始终能拥有焦点。

  
以前大致就是以前的认识,可以参见 JS拖动技术--- 关于setCapture 这个实现,后来随着工作要求的提高,做的工作都是要跨浏览器的,所以就重新构思并参考一些开源代码做了实现。

  
现在大致思路可分析为以下几步,我一一为您展现。

  
1、 我们是为了拖移而搬移吗?当然不是,如google地图,当每次搬移后他的目的是为了计算当前空间坐标来加载地理信息。所以我这里设计了几个常见事件。以下是事件列表  
onDragStart :元素发生拖移时,如果注册该事件,触发时会接收到两个参数x,y分别为被搬移元素发生拖移时的坐标  
onDrag : 元素拖移过程中,如果注册该事件,触发时会接收到两个参数nx,ny拖移过程中坐标发生的偏移量  
onDragEnd :元素发生结束时,如果注册该事件,触发时会接收到两个参数x,y分别为被搬移元素的当前坐标  
2、 onmousedown事件应该绑定给谁?以前我都是绑定给被拖移元素的,后来发现很不灵活,现在设计为可绑定给任意不相关的元素同时实现该元素的拖动。

  
3、 如何来实现元素搬移过程中一直拥有焦点?因为要跨浏览器,所以就不再用setCapture之类的方法,这里换种思维,为什么元素元素搬移过程中没有了焦点呢,主要是我们把onmousemove事件注册到了被拖移的元素上,而这并不是必需的,所以当元素触发onmousedown事件后,我把onmousemove、onmouseup事件直接注册到document上,这样鼠标移到哪都会有焦点。

  
说完了这么多,直接看代码结构吧!

  
代码如下:

  
Drag = {  
obj: null,  
init: function (options) {  
options.handler.onmousedown = this.start;  
options.handler.root = options.root || options.handler;  
var root = options.handler.root;  
root.onDragStart = options.dragStart || new Function();  
root.onDrag = options.onDrag || new Function();  
root.onDragEnd = options.onDragEnd || new Function();  
},  
start: function (e) {//此时的this是handler  
var obj = Drag.obj = this;  
obj.style.cursor = 'move';  
e = e || Drag.fixEvent(window.event);  
ex = e.pageX;  
ey = e.pageY;  
obj.lastMouseX = ex;  
obj.lastMouseY = ey;  
var x = obj.root.offsetLeft;  
var y = obj.root..offsetTop;  
obj.root.style.left = x + "px";  
obj.root.style.top = y + "px";  
document.onmouseup = Drag.end;  
document.onmousemove = Drag.drag;  
obj.root.onDragStart(x, y);  
},  
drag: function (e) {  
e = e || Drag.fixEvent(window.event);  
ex = e.pageX;  
ey = e.pageY;  
var root = Drag.obj.root;  
var x = root.style.left ? parseInt(root.style.left) : 0;  
var y = root.style.top 万彩娱乐 ? parseInt(root.style.top) : 0;  
var nx = ex - Drag.obj.lastMouseX + x;  
var ny = ey - Drag.obj.lastMouseY + y;  
root.style.left = nx + "px";  
root.style.top = ny + "px";  
Drag.obj.root.onDrag(nx, ny);  
Drag.obj.lastMouseX = ex;  
Drag.obj.lastMouseY = ey;  
},  
end: function (e) {  
var x = Drag.obj.root.style.left ? parseInt(Drag.obj.root.style.left) : 0;  
var y = Drag.obj.root.style.top ? parseInt(Drag.obj.root.style.top) : 0;  
Drag.obj.root.onDragEnd(x, y);  
document.onmousemove = null;  
document.onmouseup = null;  
Drag.obj = null;  
},  
fixEvent: function (e) {  
e.pageX = e.clientX + document.documentElement.scrollLeft;  
e.pageY = e.clientY + document.documentElement.scrollTop;  
return e;  
}  
}  
  
上面init主要处理一些初如化工作,如记录onDragStart、onDrag、onDragEnd三个事件, handler为处理拖动事件的那个元素,root为被拖动的元素。

  
当在handler上点击后触发Drag.start方法,Drag.start主要为记录住鼠标相对整个页面的位置;给document注册onmouseup、onmousemove事件,及触发onDragStart事件。

  
Drag.drag方法也很简单,主要作用就是更新被搬移元素位置,同时记录住鼠标相对整个页面的位置。

  
Drag.end方法就更简单了,就是做一些收尾工作。

  
  
最后给大家附段使用的代码吧,祝大家学习愉快!

  
代码如下:

  
Drag.init({  
handler: document.getElementById("handler"),  
root:document.getElementById("root");  
});  
  

  
  

(责任编辑:admin)

上一篇:js图片实时加载提供网页打开速度

下一篇:jQuery 锚点跳转滚动条平滑滚动一句话代码

推荐内容

客户服务热线

010-400-12345

在线客服