nbsp;html>审批流实现(Flex转向Html5)第一版 /* 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; }
登录后复制
问题补充：目标功能：我想把那几个png的图片拖放到下面的canvas（刚才修改成了div，发布问题时忘了改了）中，我注册了事件处理器和编写了dragstart、dragend、dragenter、dragleave、dragover、drop。
我昨天研究了一下午了，今天也弄了一上午了，还是不行，求大家帮忙看看：
1.在handleDragStart中的这句话evt.dataTransfer.setData(“image/png”,evt.target.textContent);中第二个参数怎么写，现在写的是处理文本的，而卧要处理图像
2.我以前看书写过处理文本的，但按照我的理解去处理图像时那个handleDrop不对，所以我把函数里面的内容删了，求您帮我看看怎么写，最好帮我写出来，我知道这样很不好，但我是真的不会了，我已经按照《html5程序设计 第二版》中的例子琢磨快一天了，求帮忙啊
回复讨论(解决方案)
你太笨了，看下面：
nbsp;html>审批流实现(Flex转向Html5)第一版 .highlighted { background-color: yellow; } .validtarget { background-color: lightblue; } //对放置目标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+="@@##@@";}//为了实现更好的放置反馈效果，我们将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;}
登录后复制
用C#思想理解HTML5拖、放:http://www.deepleo.com/archives/1386
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3113251.html
