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

 

posted @ 2016-09-21 13:55  抓狂的镜子  阅读(230)  评论(0)    收藏  举报