JavaScript 拖拽实例代码

前端之家收集整理的这篇文章主要介绍了JavaScript 拖拽实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

拖拽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代码

<Meta charset="utf8"> js拖拽<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>