div拖拽改变其宽度

CSS:

body {
	margin:0;
	padding:0;
	overflow-y:auto;
}
#leftDiv {
	width:300px;
	height:500px;
	border:1px red solid;
	border-right:none;
	float:left;
}
#splitDiv {
	float:left;
	width:1px;
	height:500px;
	border-left:1px blue solid;
}
#rightDiv {
	margin:0px;
	height:500px;
	border:1px solid gray;
}

JS:

 $(function() {
     $("#splitDiv").mouseover(function(e) {
         $(this).css("cursor", "e-resize");
     });
     $("#splitDiv").mousedown(function(e) {
         $(this).css("cursor", "e-resize");
         $("body").mousemove(function(eve) {
             var _x = eve.pageX;
             $("#leftDiv").animate({
                 width: _x
             }, 1);
         })
     });
     $("body").mouseup(function(e) {
         $(this).unbind("mousemove");
         $(this).css("cursor", "default");
     });
 });

HTML:

<div id="leftDiv">我是左</div>
<div id="splitDiv"></div>
<div id="rightDiv">我是右</div>

效果：