js实现的dom元素拖动封装插件代码实例
分类:实例代码
在实际应用中经常会有对元素进行拖动的需求,下面就是一个对此功能的封装代码。
需要的朋友可以做一下参考,代码如下:
/** * 兼容不同定位方式的通用拖动接口 * @param {Node} dragger 需要被拖动的元素 */ //必须告诉系统,哪些元素是可以进行交互,而哪些是不行 function canDrag(dragger) { var drag = bindEvent(dragger,'onmousedown',function(e){ //兼容事件对象 e = e || event; //兼容坐标属性 var pageX = e.clientX || e.pageX; var pageY = e.clientY || e.pageY; //兼容样式对象 var style = dragger.currentStyle || window.getComputedStyle(dragger,null); //当没有设置left和top属性时,IE下默认值为auto var offX = parseInt(style.left) || 0; var offY = parseInt(style.top) || 0; //获取鼠标相对于元素的间距 var offXL = pageX - offX; var offYL = pageY - offY; //为dragger增加onDrag属性,用来存储拖动事件 if (!dragger.onDrag) { //监听拖动事件 dragger.onDrag = bindEvent(document,'onmousemove',function(e){ e = e || event; var x = e.clientX || e.pageX; var y = e.clientY || e.pageY //设置X坐标 dragger.style.left = x - offXL + 'px'; //设置Y坐标 dragger.style.top = y - offYL + 'px'; }); //监听拖动结束事件 dragger.onDragEnd = bindEvent(document,'onmouseup',function(e){ //释放前读取事件对象 var x = e.clientX || e.pageX; var y = e.clientY || e.pageY //释放拖动监听和结束监听 removeEvent(document, 'onmousemove', dragger.onDrag); removeEvent(document, 'onmouseup', dragger.onDragEnd); try { //删除拖动时所用的属性,兼容FF使用 delete dragger.onDrag; delete dragger.onDragEnd; } catch (e) { //删除拖动时所用的属性,兼容IE6使用 dragger.removeAttribute('onDrag'); dragger.removeAttribute('onDragEnd'); } }); } }); return function() { //返回一个可以取消拖动功能的函数引用 //释放拖动监听和结束监听 removeEvent(document, 'onmousemove', dragger.onDrag); removeEvent(document, 'onmouseup', dragger.onDragEnd); try { //删除拖动时所用的属性,兼容FF使用 delete dragger.onDrag; delete dragger.onDragEnd; } catch (e) { //删除拖动时所用的属性,兼容IE6使用 dragger.removeAttribute('onDrag'); dragger.removeAttribute('onDragEnd'); } } }
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu