Heim > Artikel > Web-Frontend > 使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose
使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:39:11994Durchsuche
<!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" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>选择</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="image/2.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>连线</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="image/9.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>开始</label> </div> </td> </tr> <tr> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="image/10.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>结束</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="image/7.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>异步分支</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="image/7.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </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%" style="max-width:90%"> <!--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> 问题补充：目标功能：我想把那几个png的图片拖放到下面的canvas（刚才修改成了div，发布问题时忘了改了）中，我注册了事件处理器和编写了dragstart、dragend、dragenter、dragleave、dragover、drop。
我昨天研究了一下午了，今天也弄了一上午了，还是不行，求大家帮忙看看：
1.在handleDragStart中的这句话evt.dataTransfer.setData("image/png",evt.target.textContent);中第二个参数怎么写，现在写的是处理文本的，而卧要处理图像
2.我以前看书写过处理文本的，但按照我的理解去处理图像时那个handleDrop不对，所以我把函数里面的内容删了，求您帮我看看怎么写，最好帮我写出来，我知道这样很不好，但我是真的不会了，我已经按照《html5程序设计 第二版》中的例子琢磨快一天了，求帮忙啊
回复讨论(解决方案)
你太笨了，看下面：
<!DOCTYPE html><html><head> <title>审批流实现(Flex转向Html5)第一版</title> <link rel="stylesheet" type="text/css" href="style.css"> <!--定义本html的样式--> <style type="text/css"> .highlighted { background-color: yellow; } .validtarget { background-color: lightblue; } </style> <!--定义本html的js--> <script type="text/javascript"> <!--控制拖放的事件--> //对放置目标canvas_liuchengtu的引用 var imagesDropTarget; function loadDemo(){ imagesDropTarget=document.getElementById("div_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); //放置目标div_liuchengtu外围的td起到缓冲作用，用来重置放置目标区域的样式 var td_liuchengtu=document.getElementById("td_liuchengtu"); td_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); //"dragstart" 开始拖动时调用 function handleDragStart(evt){ //拖动只支持copy操作 evt.effectAllowed="copy"; //高亮潜在的放置目标 imagesDropTarget.className="validtarget"; //拖动起始目标是成员之一 //成员的数据是png图像 evt.dataTransfer.setData("image/png",evt.target.id); //alert(evt.target.id); return true; } //"dragenter" 停止传播，阻止默认的拖动动作将我们的目标列表显示为有效的放置目标 function handleDragEnter(evt){ evt.stopPropagation(); evt.preventDefault(); return false; } //"dragover" 如果用户鼠标悬停在canvas上会显示为允许复制，同时为了提供更好的反馈效果，目标列表被高亮显示 function handleDragOver(evt){ evt.dataTransfer.dropEffect="copy"; evt.stopPropagation(); evt.preventDefault(); imagesDropTarget.className="highlighted"; return false; } //"dragleave" function handleDragLeave(evt){ return false; } //"drop" function handleDrop(evt){ evt.preventDefault(); evt.stopPropagation(); //使用image类型获取拖动项中的图像 var image=evt.dataTransfer.getData("image/png"); evt.dataTransfer.dropEffect="copy"; var dsa=document.getElementById(image); imagesDropTarget.innerHTML+="<img src='"+dsa.src+"'/ alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" >"; } //为了实现更好的放置反馈效果，我们将td元素上的dragover事件作为关闭目标区域高亮效果的标记 function handleDragOverOuter(evt){ if(evt.target.id=="td_liuchengtu") imagesDropTarget.className="validtarget"; evt.stopPropagation(); return false; } //"dragend" 确保清空所有的拖放操作 function handleDragEnd(evt){ //恢复潜在放置目标样式 imagesDropTarget.className=null; return false; } </script></head><body> <div id="main" style="max-width:90%" 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 id="a" src="image/4.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>选择</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img id="b" src="image/2.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>连线</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img id="c" src="image/9.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>开始</label> </div> </td> </tr> <tr> <td width="80px" height="55px" align="center"> <span draggable="true"> <img id="d" src="image/10.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>结束</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img id="e" src="image/7.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>异步分支</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img id="f" src="image/7.png" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </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%" style="max-width:90%"> <!--canvas--> <table id="table_liuchengtu_html" 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 id="td_liuchengtu"> <div id="div_liuchengtu"> <!--拖动放置目标区域--> </div> </td> </tr> </tr> </table> </td> </tr> </table> </div></body></html> 用C#思想理解HTML5拖、放:http://www.deepleo.com/archives/1386
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：IE下table设置高度100%却无效的情况_html/css_WEB-ITnoseNächster Artikel：为一组元素设置display:inline-block;后元素之间会增加空隙_html/css_WEB-ITnose