jQuery拖拽div实现
- - CSDN博客Web前端推荐文章思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是. 1、组件左上角与屏幕左上角的相对位置. 2、鼠标所在坐标与组件左上角的相对位置. $(document).ready(function(){
var move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置.
思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是
1、组件左上角与屏幕左上角的相对位置
2、鼠标所在坐标与组件左上角的相对位置。
具体函数如下:
.drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; }
$(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").mousedown(function(e){ move=true; _x=e.pageX-parseInt($(".drag").css("left")); _y=e.pageY-parseInt($(".drag").css("top")); }); $(document).mousemove(function(e){ if(move){ var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 var y=e.pageY-_y; $(".drag").css({"top":y,"left":x}); } }).mouseup(function(){ move=false; });其中e.pageX,e.pageY为当前鼠标的横纵坐标。
大家自己动手试一下,思路就更加清晰了~
and