一、JS 拖拽的实现实例代码:
<script src="js/jquery-1.10.1.min.js">
<script type="text/javascript">
$(function(){
moveBox($("#Box"),$("#drag")) ;
})
//B被拖动的div,BT可拖动区域
function moveBox(B,BT){
var bDrag = false;
var _x,_y;
BT.mousedown(function(event){
var e=event || window.event;
bDrag = true;
_x=e.pageX-B.position().left;
_y=e.pageY-B.position().top;
return false
})
$(document).mousemove(function(event){
if(!bDrag) return false;
var e=event || window.event;
var x=e.pageX-_x;
var y=e.pageY-_y;
console.log(B.position());
var maxL = $(document).width() - B.outerWidth();
var maxT = $(document).height() - B.outerHeight();
x = x < 0 ? 0: x; x = x > maxL ? maxL: x;
y = y < 0 ? 0: y; y = y > maxT ? maxT: y;
B.css({left:x,top:y});
return false
}).mouseup(function(){
bDrag = false;
return false
})
}
二、 js之拖拽效果
主要原理:
1、当鼠标按下时,记录鼠标坐标,用到的是 onmousedown;
2、当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove;
3、当鼠标松开时,清除事件,用到的是 onmouseup;
了解的知识:
1、div 的 offsetLeft 与 style.left 的区别:
效果图如下: