JavaScript 拖拽实例代码

一、JS 拖拽的实现实例代码：

rush:js;">

Box">

被拖动的整个div

<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 的区别：

效果图如下：

突然发现有没有效果图都一样哈哈，不说废话了，上代码：

HTML代码：

rush:xhtml;"> <Meta charset="utf8">