自己写一个jqery的拖拽插件

自己写一个jqery的拖拽插件

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版。

实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件

先说明一下我写的插件的原则:

1.常量分离出来,放在$.zUI.插件中

2.插件的主体运行函数命名为$.zUI.插件.fn

3.销毁函数命名为$.zUI.插件.unfn

这些规范,主要是为了以后写其它插件时,放在一起,精简代码用的,以后可能还会添加�其它规则,以写出一个骨架来。

拖拽的原理事实上比較简单,就是在鼠标落下后,加入�一个mousemove事件,让元素尾随鼠标移动,鼠标抬起后,移除刚才的事件。别看以下的代码那么多,事实上多数是控制元素拖拽的范围的,把这些代码忽略后,其余的东西,非常少。

基本的两段代码例如以下:

		$.zUI = $.zUI || {}
		/*
		 * draggable
		 * 參数:obj{
		 * bOffsetParentBoundary:是否以定位父亲元素为边界,
		 * oBoundary:指定元素left和top的边界值,形如{iMinLeft:...,iMaxLeft:...,iMinTop:...,iMaxTop:...},与上一个參数相互排斥
		 * fnComputePosition:扩展函数,返回形如{left:...,top:...}的对象
		 * }
		 * 支持的自己定义事件:
		 * "draggable.start":drag起始,就是鼠标down后触发
		 * "draggable.move":drag过程中多次触发
		 * "draggable.stop":drag结束触发,就是鼠标up后触发
		 */
		//draggable常量
		$.zUI.draggable = {
			defaults :{
				bOffsetParentBoundary:false,//是否以定位父亲元素为边界
				oBoundary:null,//边界
				fnComputePosition:null//计算位置的函数
			},
			sFlagName:"zUIdraggable",
			sEventName:"zUIdraggableEvent",
			sOptsName:"draggableOpts"
		}
		$.zUI.draggable.fn = function(ele,opts){

			var jqEle = $(ele);
			jqEle.data($.zUI.draggable.sOptsName,$.extend({},$.zUI.draggable.defaults,opts));
			//假设该參数已经运行过draggable了,直接返回,仅相当于改动了配置參数
			if(jqEle.data($.zUI.draggable.sFlagName)){
				return;
			}
			jqEle.data($.zUI.draggable.sFlagName,true);
			jqEle.data($.zUI.draggable.sEventName,{
				mousedown:function(ev){
				var opts = jqEle.data($.zUI.draggable.sOptsName);
				var jqThis = $(this);
				jqThis.trigger("draggable.start");
				var iOffsetX = ev.pageX - this.offsetLeft;
				var iOffsetY = ev.pageY - this.offsetTop;
				
				function fnMouseMove (ev) {
					var oPos = {};
					if(opts.fnComputePosition){
						oPos = opts.fnComputePosition(ev,iOffsetX,iOffsetY);
					}else{
						oPos.iLeft = ev.pageX - iOffsetX;
						oPos.iTop = ev.pageY - iOffsetY;
					}
					
					var oBoundary = opts.oBoundary;
					if(opts.bOffsetParentBoundary){//假设以offsetParent作为边界
						var eParent = jqThis.offsetParent()[0];
						oBoundary = {};
						oBoundary.iMinLeft = 0;
						oBoundary.iMinTop = 0;
						oBoundary.iMaxLeft = eParent.clientWidth - jqThis.outerWidth();
						oBoundary.iMaxTop = eParent.clientHeight - jqThis.outerHeight();
					}

					if(oBoundary){//假设存在oBoundary,将oBoundary作为边界
						oPos.iLeft = oPos.iLeft < oBoundary.iMinLeft ? oBoundary.iMinLeft : oPos.iLeft;
						oPos.iLeft = oPos.iLeft > oBoundary.iMaxLeft ? oBoundary.iMaxLeft : oPos.iLeft;
						oPos.iTop = oPos.iTop < oBoundary.iMinTop ? oBoundary.iMinTop : oPos.iTop;
						oPos.iTop = oPos.iTop > oBoundary.iMaxTop ? oBoundary.iMaxTop : oPos.iTop;
					}
					
					jqThis.css({left:oPos.iLeft,top:oPos.iTop});
					ev.preventDefault();
					jqThis.trigger("draggable.move");
				}
				
				var oEvent = {
					mousemove:fnMouseMove,
					mouseup:function(){
						$(document).off(oEvent);
						jqThis.trigger("draggable.stop");
					}
				};

				$(document).on(oEvent);
			}});
			
			jqEle.on(jqEle.data($.zUI.draggable.sEventName));
		}
		
		$.zUI.draggable.unfn = function(e){
			var jqEle = $(ele);
			if(jqEle.data($.zUI.draggable.sFlagName)){
				jqEle.off(jqEle.data($.zUI.draggable.sEventName));
				jqEle.data($.zUI.draggable.sFlagName,false);
			}
		}

须要说明的有几点:

1.鼠标落下后,要记录鼠标相对元素的位置,mousemove的过程中,要把这段距离减去;

2.jQuery的data方法,这种方法很方便,能够讲数据和相应的元素绑定,jq.data(key,value)就出存储,jq.data(key)就是读取,jq.data(obj)也是存储。

3.undraggable就是把事件函数去掉了

4.jQuery的on方法很强大,加入�后还能够使用trigger方法来触发,有兴趣的同学能够到官方看看API,on方法很暴躁,这里的自己定义函数,就是用这两个方法实现的。

5.这里是把方法放在了$函数上,最后要把这种方法放在$.fn上,例如以下:

$.each(["draggable"],function(i,widget){
			unWidget = "un"+widget;
			var w = {};
			w[widget] = function(args){
					this.each(function(){
					$.zUI[widget].fn(this,args);
				});
				return this;
			};
			w[unWidget] = function(){
					this.each(function(){
					$.zUI[unWidget].unfn(this);
				});
				return this;
			}
			$.fn.extend(w);
		});

这里是不是有点乱,事实上这么写主要是为了以后写方便;

each除了在jq对象上用之外,还能够使用$.each(Array,fnCallBack);之后加入�新的插件后,依照我之前的标准写,仅仅须要在第一个參数上加入�其它字符串就能够了。

细致看看,就是加入�了两个方法:draggable和undraggable;这两函数都调用this.each方法,让dragable和undraggable能够再每一个元素上都运行。

最后,用一个匿名函数自运行把他们都包起来,为了防止$符号被其它的插件使用,传一个jQuery过去:

(function($){
          .......		
})(jQuery);
	

到此为止,这个插件就写完啦。以下是demo的链接地址。

拖拽demo

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118261.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 基于go-cqhttp实现QQ机器人

    基于go-cqhttp实现QQ机器人前言本篇文章原文:http://www.7yue.top/rabbitbot/本篇文章记录一下自己在编写QQ机器人的时候所遇到的一些问题和核心功能的实现。QQ机器人RabbitBot采用python编写,由于是个人学习使用,故目前不会开源完整代码,只会放出核心代码供学习参考。使用的go-cqhttp项目:https://github.com/Mrs4s/go-cqhttpgo-cqhttp是基于Mirai以及MiraiGo的cqhttpgolang原生实现。RabbitBot在读取

  • linux抓包工具的学习[通俗易懂]

    linux抓包工具的学习[通俗易懂]1.tcpdump命令,入门文档http://blog.jobbole.com/91631/2.wiresharp

  • 关于数组元素(ArrayPlug)的增减使用,逻辑索引和物理索引,MArrayDataBuilder

    关于数组元素(ArrayPlug)的增减使用,逻辑索引和物理索引,MArrayDataBuilder

  • stl merge函数使用

    stl merge函数使用merge函数的作用是:将两个已经排好序的序列合并为一个有序的序列。函数参数:merge(first1,last1,first2,last2,result,compare);firs1t为第一个容器的首迭代器,last1为第一个容器的末迭代器;first2为第二个容器的首迭代器,last2为容器的末迭代器;result为存放结果的容器,comapre为比较函数(可略写,默认为合并为…

  • 代理重加密_代理重加密BBS方案

    代理重加密_代理重加密BBS方案云计算中的数据机密性风险极大地阻碍了云计算的应用,而在用户端加密的模式对于数据共享来说非常不便,用户频繁的获取和释放授权将使得用户增效据加解密工作繁重。因此代理重加密技术在云端进行数据的密文转换,减轻了用户端的负担,同时加强了云端数据的保密性。一、代理重加密代理重加密是密文间的一种密钥转换机制,是由Blaze等人在1998年的欧洲密码学年会上提出的,并由Ateniese等人在2005年的网络和分布式系统安全研讨会议和2007年的美国计算机学会计算机与通信安全会议上给出了规范的形式化定义。在代理重加密中

  • dataTable自定义搜索框位置

    dataTable自定义搜索框位置其实不能叫自定义位置dataTable的搜索框请参阅dataTabledom:http://www.datatables.club/reference/option/dom.html我的需求是将dataTable默认位置的搜索框移动到我的form表单中的搜索位置如图:因为自己不会写前端却要写前端幸得群里大神指点在页面写样式覆盖原来的样式在这里记录一下解决办法…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号