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下载
案例下载
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17