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

最新推荐文章于 2024-09-15 22:03:14 发布

reloney

最新推荐文章于 2024-09-15 22:03:14 发布

阅读量349

点赞数

分类专栏：打造自己的js库文章标签： dom 设计模式 webkit 元素拖放 js

本文链接：https://blog.csdn.net/xzlove_/article/details/39143721

版权

打造自己的js库专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一节主要说了一下与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){}
});

来定义拖动过程。

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

reloney

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录