JQuery实现鼠标拖动元素移动位置（源码+注释）

明子健

浏览: 576869 次
性别:
来自: 杭州

最近访客更多访客>>

limingmax

log_cd

napolun007

hcqenjoy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

js jquery 源码鼠标拖动

欢迎讨论指正！

print.html代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>发票打印</title>
</head>
<script type="text/javascript"
	src="js/jquery-2.1.1.js"></script>
<script type="text/javascript"
	src="js/print.js"></script>
<body>
	<div name="invoice">
		<div name="stuname" id="stuname">姓名：张三</div>

		<div name="feeacount" id="feeacount">金额：1000元</div>

		<div name="schoolname" id="schoolname">单位：浙江大学</div>

	</div>
</body>
</html>

print.js代码：

/**
 * @name print.js
 * @page print.html
 * @author mingzijian
 */
$(function() {

	// 设定元素相对原点的初始位置
	var init_x = 0;
	var init_y = 0;

	// 设定各元素的初始位置
	var _stuname = $("#stuname");
	var stuname_x = 10;
	var stuname_y = 10;
	var _feeacount = $("#feeacount");
	var feeacount_x = 10;
	var feeacount_y = 70;
	var _schoolname = $("#schoolname");
	var schoolname_x = 10;
	var schoolname_y = 40;

	var ids = [ _stuname, _feeacount, _schoolname ];
	var ids_x = [ stuname_x, feeacount_x, schoolname_x ];
	var ids_y = [ stuname_y, feeacount_y, schoolname_y ];

	// 循环添加元素移动事件监听,添加绝对定位,改变鼠标指针样式
	$.each(ids, function(i, _this) {
		_this.css({
			'position' : 'absolute',
			'cursor' : 'crosshair',
			'left' : ids_x[i],
			'top' : ids_y[i]
		});

		_this.mousedown(function(e) {
			beginmove(e, _this);
		});
	});

	// 开始移动元素位置
	function beginmove(e, _this) {
		// 当前元素的位置
		var offset = _this.offset();
		var cx = offset.left;
		var cy = offset.top;
		// 当前鼠标的位置(移动前，鼠标按下)
		var sx = e.pageX;
		var sy = e.pageY;

		// 计算当前鼠标和元素之间位置的偏移量，让移动后的元素以鼠标按下时的位置为坐标。（默认以元素左上点为坐标）
		var px = sx - cx;
		var py = sy - cy;

		// 绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
		$(document).bind("mousemove", function(ev) {
			// 当前鼠标的位置（移动后，鼠标弹起）
			sx = ev.pageX;
			sy = ev.pageY;

			// 当前元素位置
			var _x = sx - px;
			var _y = sy - py;
			// 设定元素位置
			_this.css({
				'left' : _x,
				'top' : _y
			});
		});
		// 当鼠标按键弹起时，解除元素移动，让元素停留在当前位置
		$(document).mouseup(function() {
			$(this).unbind("mousemove");
			// 记录元素位置
			$.each(ids, function(i, _this) {
				// 当前元素的位置
				var offset = _this.offset();
				var cx = offset.left;
				var cy = offset.top;
				// 保存位置
				ids_x[i] = cx;
				ids_y[i] = cy;

			});

		})
	}
});

jquery-2.1.1.js下载

案例下载