<html><head>
<meta charset="UTF-8">
<title>来回拖放效果</title>
</head>
<body><div id="source" style="border: 1px solid brown;width: 300px;height: 200px;">
<h3>项目</h3>
<div id="ck" draggable="true" οndragstart="dsHandler(event)">中电科</div>
<div id="ff" draggable="true" οndragstart="dsHandler(event)">研究所</div>
<div id="nv" draggable="true" οndragstart="dsHandler(event)">北斗卫星</div>
</div>
<br/><br/>
<div id="dest" style="border: 1px solid black; width: 300px;height: 200px ;" draggable="true">
<h2 οndragleave="return false;">收藏夹</h2>
</div>
<script type="text/javascript">
//开始拖动
var dsHandler=function(evt){
evt.dataTransfer.setData("text/plain","<item>" +evt.target.id +evt.target.innerHTML);
}
//放开元素事件
var dest=document.getElementById("dest");
var source=document.getElementById("source");
dest.οndrοp=function(evt){
//取出传输的内容
var content=evt.dataTransfer.getData("text/plain");
if (content.indexOf("<item>")==0) {
var newFile=document.createElement("div");
newFile.id=content.substring(6,8);
newFile.innerHTML=content.substring(8);
newFile.draggable="true";
//定义新元素的开始拖拽事件
newFile.οndragstart=function(evt){
evt.dataTransfer.setData("text/plain","<item>" +evt.target.id +evt.target.innerHTML);
}
//在dest框中添加移动的元素
dest.appendChild(newFile);
//同时删除源框中的元素
moveObj=document.getElementById(content.substring(6,8));//content.substring(6,8)是id（ck,ff,nv）
source.removeChild(moveObj);
//console.log(content.substring(6,8));
}
}
source.οndrοp=function(evt){
var sourceContent=evt.dataTransfer.getData("text/plain");
if (sourceContent.indexOf("<item>")==0) {
moveDestObj=document.getElementById(sourceContent.substring(6,8));
//console.log(moveDestObj.ondragstart)
source.appendChild(moveDestObj);
}
}
document.οndrοp=function(evt){
return false;
}
document.οndragοver=function(evt){
return false;
}
</script>
</body></html>
333333
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
