我现在需要使用htnl5的拖放对图片进行拖拽，遇到了问题，求解答

0 0

我现在需要使用htnl5的拖放对图片进行拖拽，遇到了问题，求解答15

<!DOCTYPE html>
<html>
<head>
    <title>审批流实现(Flex转向Html5)第一版</title>
<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">

</style>

<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">
    
<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>

<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>

<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%">

    
<table id="table_liuchengtu" style="border:1px solid #00FF00">
    
<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>

<tr>
    <td>
    <div id="canvas_liuchengtu">
    
</div>
</td>
</tr>
</tr>
</table>

</td>
            </tr>
        </table>
</div>
</body>
</html>

问题补充：目标功能：我想把那几个png的图片拖放到下面的canvas（刚才修改成了div，发布问题时忘了改了）中，我注册了事件处理器和编写了dragstart、dragend、dragenter、dragleave、dragover、drop。
我昨天研究了一下午了，今天也弄了一上午了，还是不行，求大家帮忙看看：
1.在handleDragStart中的这句话evt.dataTransfer.setData("image/png",evt.target.textContent);中第二个参数怎么写，现在写的是处理文本的，而卧要处理图像
2.我以前看书写过处理文本的，但按照我的理解去处理图像时那个handleDrop不对，所以我把函数里面的内容删了，求您帮我看看怎么写，最好帮我写出来，我知道这样很不好，但我是真的不会了，我已经按照《html5程序设计第二版》中的例子琢磨快一天了，求帮忙啊

HTML5