使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙
HTML code
<!DOCTYPE html>
<html>
<head>
<title>审批流实现(Flex转向Html5)第一版</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--定义本html的样式-->
<style type="text/css">
</style>
<!--定义本html的js-->
<script type="text/javascript">
/* function changeTabList1(element){
var theTab=element.parentNode;
var _tabList=document.getElementById("tablist1");
var DIVs=_tabList.getElementsByTagName("DIV");
for(i=0;i<DIVs.length;i++){
DIVs[i].className="tab_normal";
}
theTab.className="tab_nonce";
}
function changeTabList2(element){
var theTab=element.parentNode;
var _tabList=document.getElementById("tablist2");
var DIVs=_tabList.getElementsByTagName("DIV");
for(i=0;i<DIVs.length;i++){
DIVs[i].className="tab_normal";
}
theTab.className="tab_nonce";
} */
<!--控制拖放的事件-->
//这个数组用来保存图像的信息
var images=[];
//对放置目标canvas_liuchengtu的引用
var imagesDropTarget;
function loadDemo(){
imagesDropTarget=document.getElementById("canvas_liuchengtu");
//放置目标注册了dragenter、dragover、dragleave和drop事件处理器
imagesDropTarget.addEventListener("dragenter",handleDragEnter,false);
imagesDropTarget.addEventListener("dragover",handleDragOver,false);
imagesDropTarget.addEventListener("dragleave",handleDragLeave,false);
imagesDropTarget.addEventListener("drop",handleDrop,false);
var table_liuchengtu=document.getElementById("table_liuchengtu");
table_liuchengtu.addEventListener("dragover",handleDragOverOuter,false);
//每个可拖动的成员都有拖动开始和结束事件处理器
var members=document.querySelectorAll("img");
[].forEach.call(members,function(member){
member.addEventListener("dragstart",handleDragStart,false);
member.addEventListener("dragend",handleDragEnd,false);
});
}
window.addEventListener("load",loadDemo,false);
//开始拖动时调用
function handleDragStart(evt){
//拖动只支持copy操作
evt.effectAllowed="copy";
//高亮潜在的放置目标
imagesDropTarget.className="validtarget";
//拖动起始目标是成员之一
//成员的数据是png图像
evt.dataTransfer.setData("image/png",evt.target.textContent);////////////////////////////////////
return true;
}
//停止传播，阻止默认的拖动动作将我们的目标列表显示为有效的放置目标
function handleDragEnter(evt){
evt.stopPropagation();
evt.preventDefault();
return false;
}
function handleDragOverOuter(evt){
if(evt.target.id=="table_liuchengtu")
imagesDropTarget.className="validtarget";
evt.stopPropagation();
evt.preventDefault();
return false;
}
function handleDragLeave(evt){
return false;
}
//如果用户鼠标悬停在canvas上
//会显示为允许复制，同时为了提供更好的反馈效果，目标列表被高亮显示
function handleDragOver(evt){
evt.dataTransfer.dropEffect="copy";
evt.stopPropagation();
evt.preventDefault();
imagesDropTarget.className="highlighted";
return false;
}
function handleDrop(evt){
evt.preventDefault();
evt.stopPropagation();
}
//确保清空所有的拖放操作
function handleDragEnd(evt){
//恢复潜在放置目标样式
imagesList.className=null;
return false;
}
</script>
</head>
<body>
<div id="main" height="500" width="800">
<div id="main_head_button" height="45" width="100%" style="border:1px solid #A3C0E8">
<input id="new" class="button_new" type="button" value="新建">
<input id="save" class="button_save" type="button" value="保存">
<input id="close" class="button_close" type="button" value="关闭">
</div>
<table id="main_body_table" width="100%" height="90%" border="0" cellspacing="0" cellpadding="0">
<tr height="100%">
<td width="40%" height="100%">
<table style="border:1px solid #00FF00">
<!--tab切换的位置-->
<tr>
<td id="tablist1" style="border:1px solid #FFFF00">
<div class="tab_nonce"><a href="#" onClick="changeTabList1(this)">流程控件</a></div>
<div class="tab_normal"><a href="#" onClick="changeTabList1(this)">人力资源</a></div>
</td>
</tr>
<!--accordiond的位置-->
<tr>
<td>
<div id="div_components">
<div id="bar_liucheng">
<label>流程监控</label>
</div>
<div id="div_image" valign="bottom" align="left">
<table id="div_image_table" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/4.png">
</span>
<div>
<label>选择</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/2.png">
</span>
<div>
<label>连线</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/9.png">
</span>
<div>
<label>开始</label>
</div>
</td>
</tr>
<tr>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/10.png">
</span>
<div>
<label>结束</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/7.png">
</span>
<div>
<label>异步分支</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/7.png">
</span>
<div>
<label>同步分支</label>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
<!--一个div和table的位置-->
<tr>
<td>
<div id="div_shuxingkuang">
<div id="bar_shuxingkuang"><label>属性对话框</label></div>
<table id="table_shuxingkuang" border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="150px">名称</th>
<th width="150px">值</th>
</tr>
<tr>
<td width="150px">fdsf</td>
<td width="150px">fsdf</td>
</tr>
<tr>
<td width="150px">fdsf</td>
<td width="150px">fsdf</td>
</tr>
<tr>
<td width="150px">fsdf</td>
<td width="150px">fasdf</td>
</tr>
<tr>
<td width="150px">fsdf</td>
<td width="150px">fsad</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<td width="60%" height="100%">
<!--canvas-->
<table id="table_liuchengtu" style="border:1px solid #00FF00">
<!--tab切换的位置-->
<tr>
<td id="tablist2" style="border:1px solid #FFFF00">
<div class="tab_nonce"><a href="#" onClick="changeTabList2(this)">流程图</a></div>
<div class="tab_normal"><a href="#" onClick="changeTabList2(this)">html</a></div>
</td>
<!--accordiond的位置-->
<tr>
<td>
<div id="canvas_liuchengtu">
<!--拖动放置目标区域-->
</div>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>