请问我想实现这样一个功能左右可以互相拖拽，我现在只做了左边的部分，哪里出错了？
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>task0002</title>
<link rel = "stylesheet" type = "text/css" href = "css/task002_5.css">
</head>
<body>
<div id = "leftBox">
<div id = "box1" class = "box">1</div>
<div id = "box2" class = "box">2</div>
<div id = "box3" class = "box">3</div>
<div id = "box4" class = "box">4</div>
</div>
<div id = "rightBox">
<div id = "box5" class = "box">5</div>
<div id = "box6" class = "box">6</div>
<div id = "box7" class = "box">7</div>
<div id = "box8" class = "box">8</div>
</div>
</body>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/task002_5.js"></script>
</html>
JS部分：
window.onload=drag;
var box = $("#leftBox").getElementsByClassName("box");
function drag(){
for(var i = 0;i<box.length;i++){
box[i].onmousedown=fndown;
box[i].onmouseup=function(event){
event = event || window.event;
var le = $("#rightBox").getElementsByTagName("div");
if((130<parseInt(event.clientX -disX))&&(parseInt(event.clientX -disX)<460)&&(event.clientY -disY<$("#rightBox").offsetTop)){
this.parentNode.removeChild(this);
this.style.left=0+'px';
this.style.top=(le.length)*30+'px';
$("#rightBox").appendChild(this);
} else{
this.style.left=0+'px';
this.style.top=0+'px';
}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
function fndown(event){
event = event || window.event;
var target = event.target || event.srcElement;
disX=event.clientX-target.offsetLeft,
disY=event.clientY-target.offsetTop;
document.onmousemove=function(event){
event = event || window.event;
var target = event.target || event.srcElement;
target.style.left=event.clientX -disX + "px";
target.style.top=event.clientY -disY + "px";
}
}
