Pc端和移动端拖拽组件jquery.drag.js

最新推荐文章于 2024-07-02 15:52:51 发布

pvfhv

最新推荐文章于 2024-07-02 15:52:51 发布

阅读量1.4w

点赞数 5

分类专栏： javascript 文章标签： drag

本文链接：https://blog.csdn.net/pvfhv/article/details/6174337

版权

javascript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

移动市场开始火爆以来，网页上的拖拽效果则要做到全兼容则不是一件易事，因此最近把研究成果奉上，供大家使用。

几点声明：

1.被拖拽的元素不要是超链接，因为阻止了默认事件，所以想让元素内的超链接也打开是不现实的，否则手工取消默认的阻止代码；

2.拖拽意味着该元素是绝对定位，非绝对定位的元素不能被拖拽。

源码：

(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;

			this.$element.on('touchstart.drag.founder mousedown.drag.founder', function(e) {
				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) {
					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) {
					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);

案例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				left: 10px;
				top: 10px;
				overflow: hidden;
				outline: 0;
			}
		</style>
	</head>

	<body>
		<div id="div1">div1</div>

		<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.drag.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#div1').drag({
				before: function(e) {
					$(this).text('拖动前' + e.pageX);
				},
				process: function(e) {
					document.title = '拖动中' + e.pageY;
				},
				end: function(e) {
					$(this).text('拖动完' + e.pageX);
				}
			});
		</script>
	</body>

</html>