你的位置:首页 > Java教程

[Java教程]拖拽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="js/jquery-1.10.1.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>