jquery实现在一定范围拖拽小窗口，并拖到固定区域触发事件

先上效果图

一个小小的需求案例，技术栈 jq，一个看似简单的效果，涉及到鼠标事件以及元素坐标等知识点，其实拖拽的实现原理很简单就是利用元素绝对定位实现的拖拽position: absolute。

封装拖拽（开箱即用）

$.fn.extend({
	dragging: function(data) {
		var $this = $(this);
		var xPage;
		var yPage;
		var X;
		var Y;
		var xRand = 0;
		var yRand = 0;
		var father = $this.parent();
		var defaults = {
			move: 'both',
			randomPosition: true,
			hander: 1
		}
		var opt = $.extend({}, defaults, data);
		var movePosition = opt.move;
		var random = opt.randomPosition;
		var hander = opt.hander;
		if(hander == 1) {
			hander = $this;
		} else {
			hander = $this.find(opt.hander);
		}
		father.css({
			"position": "relative",
			"overflow": "hidden"
		});
		$this.css({
			"position": "absolute"
		});
		hander.css({
			"cursor": "move"
		});
		var faWidth = father.width();
		var faHeight = father.height();
		var thisWidth = $this.width() + parseInt($this.css('padding-left')) + parseInt($this.css('padding-right'));
		var thisHeight = $this.height() + parseInt($this.css('padding-top')) + parseInt($this.css('padding-bottom'));
		var mDown = false;
		var positionX;
		var positionY;
		var moveX;
		var moveY;
		if(random) {
			$thisRandom();
		}

		function $thisRandom() {
			$this.each(function(index) {
				var randY = parseInt(Math.random() * (faHeight - thisHeight));
				var randX = parseInt(Math.random() * (faWidth - thisWidth));
				if(movePosition.toLowerCase() == 'x') {
					$(this).css({
						left: randX
					});
				} else if(movePosition.toLowerCase() == 'y') {
					$(this).css({
						top: randY
					});
				} else if(movePosition.toLowerCase() == 'both') {
					$(this).css({
						top: randY,
						left: randX
					});
				}
			});
		}
		hander.mousedown(function(e) {
			father.children().css({
				"zIndex": "0"
			});
			$this.css({
				"zIndex": "1"
			});
			mDown = true;
			X = e.pageX;
			Y = e.pageY;
			positionX = $this.position().left;
			positionY = $this.position().top;
			return false;
		});
		$(document).mouseup(function(e) {
			mDown = false;
		});
		$(document).mousemove(function(e) {
			xPage = e.pageX;
			moveX = positionX + xPage - X;
			yPage = e.pageY;
			moveY = positionY + yPage - Y;

			function thisXMove() {
				if(mDown == true) {
					$this.css({
						"left": moveX
					});
				} else {
					return;
				}
				if(moveX < 0) {
					$this.css({
						"left": "0"
					});
				}
				if(moveX > (faWidth - thisWidth)) {
					$this.css({
						"left": faWidth - thisWidth
					});
				}
				return moveX;
			}

			function thisYMove() {
				if(mDown == true) {
					$this.css({
						"top": moveY
					});
				} else {
					return;
				}
				if(moveY < 0) {
					$this.css({
						"top": "0"
					});
				}
				if(moveY > (faHeight - thisHeight)) {
					$this.css({
						"top": faHeight - thisHeight
					});
				}
				return moveY;
			}

			function thisAllMove() {
				if(mDown == true) {
					$this.css({
						"left": moveX,
						"top": moveY
					});
				} else {
					return;
				}
				if(moveX < 0) {
					$this.css({
						"left": "0"
					});
				}
				if(moveX > (faWidth - thisWidth)) {
					$this.css({
						"left": faWidth - thisWidth
					});
				}
				if(moveY < 0) {
					$this.css({
						"top": "0"
					});
				}
				if(moveY > (faHeight - thisHeight)) {
					$this.css({
						"top": faHeight - thisHeight
					});
				}
			}
			if(movePosition.toLowerCase() == "x") {
				thisXMove();
			} else if(movePosition.toLowerCase() == "y") {
				thisYMove();
			} else if(movePosition.toLowerCase() == 'both') {
				thisAllMove();
			}
		});
	}
});

相关核心代码