使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose
<!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="/static/imghw/default1.png" data-src="image/4.png" class="lazy" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>选择</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/2.png" class="lazy" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>连线</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/9.png" class="lazy" 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="/static/imghw/default1.png" data-src="image/10.png" class="lazy" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>结束</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/7.png" class="lazy" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>异步分支</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/7.png" class="lazy" 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="/static/imghw/default1.png" data-src="image/4.png" class="lazy" +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 src="/static/imghw/default1.png" data-src="image/4.png" class="lazy" id="a" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>选择</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/2.png" class="lazy" id="b" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>连线</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/9.png" class="lazy" id="c" 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="/static/imghw/default1.png" data-src="image/10.png" class="lazy" id="d" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>结束</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/7.png" class="lazy" id="e" alt="使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙_html/css_WEB-ITnose" > </span> <div> <label>异步分支</label> </div> </td> <td width="80px" height="55px" align="center"> <span draggable="true"> <img src="/static/imghw/default1.png" data-src="image/7.png" class="lazy" id="f" 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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1663
14
1419
52
1313
25
1263
29
1236
24
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
HTML: The Structure, CSS: The Style, Javascript: Le comportement
Apr 18, 2025 am 12:09 AM
Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.
L'avenir de HTML: évolution et tendances de la conception Web
Apr 17, 2025 am 12:12 AM
L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.
L'avenir de HTML, CSS et JavaScript: Tendances de développement Web
Apr 19, 2025 am 12:02 AM
Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.
HTML vs CSS vs JavaScript: un aperçu comparatif
Apr 16, 2025 am 12:04 AM
Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.
HTML: construire la structure des pages Web
Apr 14, 2025 am 12:14 AM
HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.
