拖拽事件与点击事件共同执行

先说一下逻辑,拖拽事件分为三个事件触发,touchstart touchmove touchend
click事件为两个事件触发touchstart touchend ,如果没有touchmove事件那么为点击事件。

(function($) {
	var old = $.fn.drag;

	function Drag(element, options) {
		this.ver = '1.0';
		this.$element = $(element);
		this.options = $.extend({}, $.fn.drag.defaults, options);
		this.init();
	}

	Drag.prototype = {
		constructor: Drag,
		init: function() {
			var options = this.options;
			//区分事件的条件变量
			var pageAddr = 0;
			this.$element.on('touchstart.drag.founder mousedown.drag.founder', function(e) {
				//如果鼠标按下时
				pageAddr = 0;
				var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e,
					startPos = $(this).position(),
					disX = ev.pageX - startPos.left,
					disY = ev.pageY - startPos.top,
					that = this;

				//记录初始位置,以便复位使用
				$(this).data('startPos', startPos);

				if (options.before && $.isFunction(options.before)) {
					options.before.call(that, ev);
				}
				
				
				$(document).on('touchmove.drag.founder mousemove.drag.founder', function(e) {
					//如果移动了为1,那么说明拖拽事件触发
					pageAddr = 1;
					var ev = e.type == 'touchmove' ? e.originalEvent.touches[0] : e,
						$this = $(that),
						$parent = $this.offsetParent(),
						$parent=$parent.is(':root')?$(window):$parent,
						pPos = $parent.offset(),
						pPos=pPos?pPos:{left:0,top:0},
						left = ev.pageX - disX - pPos.left,
						top = ev.pageY - disY - pPos.top,
						r = $parent.width() - $this.outerWidth(true),
						d = $parent.height() - $this.outerHeight(true);

					left = left < 0 ? 0 : left > r ? r : left;
					top = top < 0 ? 0 : top > d ? d : top;

					$(that).css({
						left: left + 'px',
						top: top + 'px'
					});

					if (options.process && $.isFunction(options.process)) {
						options.process.call(that, ev);
					}

					e.preventDefault();
				});

				$(document).on('touchend.drag.founder mouseup.drag.founder', function(e) {
					//点击事件触发
					if(pageAddr == 0){
						//自定义逻辑层
						window.location.href = "html/modules/customers/customers.html"
					}
					var ev = e.type == 'touchend' ? e.originalEvent.changedTouches[0] : e;

					if (options.end && $.isFunction(options.end)) {
						options.end.call(that, ev);
					}

					$(document).off('.drag.founder');
				});
			
			    e.preventDefault();
			});
		}
	};

	//jQ插件模式
	$.fn.drag = function(options) {
		return this.each(function() {
			var $this = $(this),
				instance = $this.data('drag');

			if (!instance) {
				instance = new Drag(this, options);
				$this.data('drag', instance);
			} else {
				instance.init();
			}

			if (typeof options === 'string') {
				//instance.options[options].call(this);
			}

		});
	};

	$.fn.drag.defaults = {
		before: $.noop,
		process: $.noop,
		end: $.noop
	};

	$.fn.drag.noConflict = function() {
		$.fn.drag = old;
		return this;
	};
})(jQuery);

拖拽事件启动函数

$('el').drag({
				// before: function(e) {
				// 	$(this).text('拖动前' + e.pageX);
				// },
				// process: function(e) {
				// 	document.title = '拖动中' + e.pageY;
				// },
				// end: function(e) {
				// 	$(this).text('拖动完' + e.pageX);
				// }
			});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值