用jquery把div在另一个大的div里面拖拽

最近尝试做网页可视化编辑,摸索了一下,最开始先要学会做 div拖动。。。

网上百度了一下,查了下资料,把代码就写成这样,记录一下

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<script src=”http://rs.fm955.com.cn/js/jquery-1.8.2.min.js” type=”text/javascript”></script>
<script>
  var _x,_y,isMove=false;
  $(function(){
    $(‘#ball’).mousedown(function(e) {
_x=e.pageX-parseInt($(“#ball”).css(“left”));
_y=e.pageY-parseInt($(“#ball”).css(“top”));
$(‘#ball’).fadeTo(20, 0.5);//点击后开始拖动并透明显
isMove = true;
});
$(this).mousemove(function(e) {
if(isMove){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(“#ball”).css({top:y,left:x});//控件新位置
if( x < 0 ){$(“#ball”).css({left:0});}
if( x > 730 ){$(“#ball”).css({left:730});}
if( y < 0 ){$(“#ball”).css({top:0});}
if( y > 480 ){$(“#ball”).css({top:480});}
}
    });
$(this).mouseup(function(e) {
isMove = false;
$(‘#ball’).fadeTo(“fast”, 1);
});
  });
</script>
</head>
<body>
<div style=”width:750px; height:500px; background:#CCCCCC; margin:auto; position:relative”>
  <span id=”ball” style=”position:absolute; width:20px; height:20px; background:#336600; left:10px; top:30px; cursor:move”></span>
</div>
</body>
</html>