使用html5的拖放对图片进行拖拽遇到了有关问题，求大神帮忙-HTML教程-爱易网页

使用html5的拖放对图片进行拖拽遇到了有关问题，求大神帮忙

日期：2014-05-17　浏览次数：20852 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

使用html5的拖放对图片进行拖拽遇到了有关问题，求大神帮忙

相关资料更多>

推荐阅读更多>