61,112
社区成员
发帖
与我相关
我的任务
分享使用html5的拖放对图片进行拖拽遇到了问题，求大神帮忙
<!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">
</span>
<div>
<label>选择</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/2.png">
</span>
<div>
<label>连线</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/9.png">
</span>
<div>
<label>开始</label>
</div>
</td>
</tr>
<tr>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/10.png">
</span>
<div>
<label>结束</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/7.png">
</span>
<div>
<label>异步分支</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img src="image/7.png">
</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%" height="100%">
<!--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程序设计 第二版》中的例子琢磨快一天了，求帮忙啊
...全文
请发表友善的回复…
发表回复
wu_now 2012-11-07
- 打赏
- 举报
1楼的朋友太给力啦，学习了！！
顶礼膜拜啊！！
袁圈er 2012-10-31
- 打赏
- 举报
用C#思想理解HTML5拖、放:http://www.deepleo.com/archives/1386
Sky_YiBai 2012-07-26
- 打赏
- 举报
你太笨了，看下面：
<!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+"'/>";
}
//为了实现更好的放置反馈效果，我们将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" 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 id="a" src="image/4.png">
</span>
<div>
<label>选择</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img id="b" src="image/2.png">
</span>
<div>
<label>连线</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img id="c" src="image/9.png">
</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">
</span>
<div>
<label>结束</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img id="e" src="image/7.png">
</span>
<div>
<label>异步分支</label>
</div>
</td>
<td width="80px" height="55px" align="center">
<span draggable="true">
<img id="f" src="image/7.png">
</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%" height="100%">
<!--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>
