首页 > 代码库 > 最好的拖拽js
最好的拖拽js
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow: hidden; } body, div, { margin: 0; padding: 0; } body { color: #fff; font: 12px/2 Arial; } p { padding: 0 10px; margin-top: 10px; } span { color: #ff0; padding-left: 5px; } #box { position: absolute; width: 300px; height: 150px; background: #D5CDDA; border: 2px solid #ccc; top: 150px; left: 400px; margin: 0; } #drag { height: 25px; cursor: move; background: #724a88; border-bottom: 2px solid #ccc; padding: 0 10px; } </style> </head> <body> <div id="box"> <div id="drag">拖动区域</div> 被拖动的整个div </div> </body></html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><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 }) }</script>
最好的拖拽js
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。