调试易

<style type="text/css">
* {
margin:0px;
padding:0px;
list-style:none;
}
#msg {
position:absolute;
top:5px;
left:300px;
border:#69C 1px solid;
background:#6CF;
font-size:12px;
width:500px;
line-height:16px;
}
.papa {
border:1px #09F solid;
width:100px;
height:200px;
}
.son {
display:block;
position:relative;
}
.son li {
border:1px #69F dashed;
height:28px;
text-align:center;
line-height:28px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var x="outside";
function m(str){
str = '<br/>' + str;
$('#msg').append(str);
}function son_mousedown(event){
var son_offset = $(this).offset(); 
start_x = event.screenX - son_offset.left; 
start_y = event.screenY - son_offset.top; 
$(this).bind('mousemove',{start_x:start_x,start_y:start_y},son_mousemove);
return false; 
}
function son_mousemove(event){
cur_x = event.screenX - event.data.start_x; 
cur_y = event.screenY - event.data.start_y; 
this.style.top = cur_y + "px"; 
this.style.zIndex = "100"; 
return false; 

}
$(document).ready(function(){
$("#son").css({"cursor":"pointer"}); 
$('#son').bind('mousedown',son_mousedown);
$('#son').bind('mouseup',function(){$(this).unbind('mousemove');});
$('#son').bind('mouseout',function(){$(this).unbind('mousemove');});
}); //end of function
</script>
<div class="papa">
  <ul id="son" class="son">
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
  </ul>
</div>
可以拖动..但有断断续续的感觉...拖得快还可能出现走丢了的效果...
请高人瞧瞧,指点一下~~~