jQuery几行JS代码实现DIV拖拽很实用
先直接上代码,以后再解释
01 |
$(function(){ |
02 |
var _move=false;//移动标记 |
03 |
var _x,_y;//鼠标离控件左上角的相对位置 |
04 |
$(".drag").mousedown(function(e){ |
05 |
_move=true; |
06 |
_x=e.pageX-parseInt($(".drag").css("left")); |
07 |
_y=e.pageY-parseInt($(".drag").css("top")); |
08 |
$(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示 |
09 |
}); |
10 |
$(document).mousemove(function(e){ |
11 |
if(_move){ |
12 |
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置 |
13 |
var y=e.pageY-_y; |
14 |
$(".drag").css({top:y,left:x});//控件新位置 |
15 |
} |
16 |
}).mouseup(function(){ |
17 |
_move=false; |
18 |
$(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明 |
19 |
}); |
20 |
}); |
