当前位置:首页 > 开发 > Web前端 > Jquery > 正文

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

发表于: 2014-08-05   作者:明子健   来源:转载   浏览:
摘要: 欢迎讨论指正!   print.html代码: <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l

欢迎讨论指正!

 

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下载

 

案例下载

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
编辑推荐
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号