> 웹 프론트엔드 > HTML 튜토리얼 > 使用html5的拖放对图片进行拖拽遇到了问题,求大神帮忙_html/css_WEB-ITnose

使用html5的拖放对图片进行拖拽遇到了问题,求大神帮忙_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 09:39:11
원래의
1008명이 탐색했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿