打造自己的js库1 -- dom操作之元素的拖放操作

来源：互联网发布：游戏源码怎么用编辑：程序博客网时间：2024/05/01 19:33

上一节主要说了一下与dom元素相关的基本操作，如选择，设置/获取css属性等等。这节主要说一下dom元素的拖动。

本节拖动是基于上节的基础之上的。用到的原理主要是鼠标的定位以及元素的定位，这里先说一下基本的原理在附上代码。

1.首先我们定义一个拖动类，这里我定义为canDrag也就是说只要有这个类的元素我们都应该让他可以拖动。

2.得到所有类后，我们应该把拖动中和拖动结束处理的能力开发出来留给客户，来提高程序的可扩展性。

程序中鼠标的定位只要用到了e.pageX(ff) 和 e.clientX + document.body.scrollLeft这样处理主要是为了兼容ff和ie等浏览器，而webkit浏览器则出其意料的全部属性都支持。当然这里有值得的一点是文档的头部记得加上<!doctype html>类似的声明。

代码如下：

var extends_ = function(src, dest){for(var i in src){dest[i] = src[i];}};var drag = function(){var nodes = [],currentNode,_callback = {dragComplete : function(srcNode, posi, curIndex){} , dragMoving : function(srcNode, posi, curIndex){srcNode.style["left"] = posi["x"] + "px";srcNode.style["top"] = posi["y"] + "px";}},index = 0;var position = {};var inArray = function(node, arr){for(var i in arr){if(arr[i] === node)return true;}return false;},delegateDrag = function(){var _this = this;//事件绑定Event(document,"mousedown",function(e){var cNode = e.target || e.srcElement;if(!inArray(cNode, _this.nodes)) return false;//指定当前移动的元素_this.currentNode = cNode;_this.currentNode.style["zIndex"] = ++index;position["x"] = e.offsetX;position["y"] = e.offsetY;});Event(document,"mousemove",function(e){//得到位置if(_this.currentNode){var x = e.pageX || e.clientX + document.body.scrollLeft,y = e.pageY || e.clientY + document.body.scrollTop;var posi = {};posi["x"] = x - position["x"];posi["y"] = y - position["y"];_callback.dragMoving(_this.currentNode, posi, index);}});Event(document,"mouseup",function(e){var cNode = e.target || e.srcElement;if(_this.currentNode){var x = e.pageX || e.clientX + document.body.scrollLeft,y = e.pageY || e.clientY + document.body.scrollTop,posi = {};posi["x"] = x - position["x"];posi["y"] = y - position["y"];//$('#console')[0].innerText = "12121212121";_this._callback.dragComplete(_this.currentNode, posi, index);_this.currentNode = null;}});},init = function(obj){//得到所有可以拖动的元素this.nodes = $(".canDrag");//继承自定义方法extends_(obj, _callback);delegateDrag.call(this);};return {nodes : nodes,currentNode : currentNode,_callback : _callback,init : init}}();var Event = function(selector, type, callback, sign){var node = $(selector)[0],addEvent = document.addEventListener ? node.addEventListener : node.attachEvent,type = document.addEventListener ? type : 'on' + type;addEvent.apply(node,[type, callback ,sign]);};

调用的时候非常简单可以直接用drag.init();或者传入自定义函数:

drag.init({dragComplete : function(srcNode, posi, curIndex){} , dragMoving : function(srcNode, posi, curIndex){}});

来定义拖动过程。

以上内容均为原创，转载请注明出处，谢谢。如果错误或者疏漏的地方欢迎大家批评指正。

0 0