<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function load(){
var lists=document.getElementsByTagName("ul");
var regexp=/\bdnd\b/;
for(var i=0;i<lists.length;i++){
if(regexp.test(lists[i].className)) dnd(lists[i]);
}
//dnd函数
function dnd(list){
var original_class=list.className;
var entered=0;
var beituo=null;
//ondragenter事件
list.οndragenter=function(e){
e=e || window.event;
document.getElementById("cont").innerHTML +="enter:"+ e.target;
if( e.stopPropagation) e.stopPropagation(); else
e.cancelBubble=true;
if (e.preventDefault) e.preventDefault();else e.defaultValue=false;
var from= e.relatedTarget;
entered++;
document.getElementById('count').innerText += e.srcElement;
//(from && !isChild(from,list)) ||
if(beituo !== this && entered==1 ){
var dt= e.dataTransfer;
var types=dt.types;
//IE types.contains("Text");
//Chrome types[0]==="text/plain";
if(!types || (types[0] && types[0]==="text/plain") || (types.contains && types.contains("Text")))
{
list.className=original_class+" dropable";
return false;
}
return ;
}
return false;
};
/*
function isChild(a,b){
for(;a;a=a.parentNode) {
document.getElementById('count').innerText += (a===b);
if(a===b) return true;
}
return false;
}*/
list.οndragοver=function(e){
// document.getElementById("cont").innerHTML +="over";
if(beituo==this) return true;
return false;
};
list.οndragleave=function(e){
e=e || window.event;
document.getElementById("cont").innerHTML +="leave:" + e.target;
if( e.stopPropagation) e.stopPropagation(); else
e.cancelBubble=true;
if (e.preventDefault) e.preventDefault();else e.defaultValue=false;
var to= e.relatedTarget;
entered--;
// document.getElementById('count').innerText +=entered;
if(beituo !==this && entered<=0){
list.className=original_class;
entered=0;
}
return false;
};
list.οndrοp=function(e){
e=e || window.event;
var dt= e.dataTransfer;
var text=dt.getData("Text");
if(text){
var item=document.createElement("li");
item.draggable=true;
item.appendChild(document.createTextNode(text));
list.appendChild(item);
list.className=original_class;
entered=0;
e.dataTransfer.dropEffect="copy";
return false;
}
}
var items=list.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
items[i].draggable=true;
}
list.οndragstart=function(e){
beituo=this;
document.getElementById("cont").innerHTML +='start';
var e=e || window.event;
var target= e.target || e.srcElement;
if(target.tagName !== "LI") return false;
var dt= e.dataTransfer;
dt.setData("Text",target.innerText || target.textContent);
//为move或者copy时兼容ie chrome
dt.effectAllowed="copy";
}
list.οndragend=function(e){
beituo=null;
document.getElementById("cont").innerHTML +=e.dataTransfer.dropEffect;
e =e || window.event;
var target= e.target || e.srcElement;
if(e.dataTransfer.dropEffect==="move")
target.parentNode.removeChild(target);
}
}
}
</script>
<style>
.dropable{
border:5px solid black;
}
.dnd{
}
li{
background-color:green;
margin:10px;
display: block;
}
ul{
background-color:orange;
height:150px;
border: 5px solid red;
}
</style>
</head>
<body οnlοad="load()" >
<div style="height:100px;background-color:green;"></div>
<ul class="dnd">
<li>li1---1</li>
<li>li1---2</li>
<li>li1---3</li>
</ul>
<div style="height:100px;background-color:green;"></div>
<ul class="dnd" >
<li>li2---1</li>
<li>li2---2</li>
<li>li2---3</li>
</ul>
<div id="count"></div>
<div id="cont"></div>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript">
function load(){
var lists=document.getElementsByTagName("ul");
var regexp=/\bdnd\b/;
for(var i=0;i<lists.length;i++){
if(regexp.test(lists[i].className)) dnd(lists[i]);
}
//dnd函数
function dnd(list){
var original_class=list.className;
var entered=0;
var beituo=null;
//ondragenter事件
list.οndragenter=function(e){
e=e || window.event;
document.getElementById("cont").innerHTML +="enter:"+ e.target;
if( e.stopPropagation) e.stopPropagation(); else
e.cancelBubble=true;
if (e.preventDefault) e.preventDefault();else e.defaultValue=false;
var from= e.relatedTarget;
entered++;
document.getElementById('count').innerText += e.srcElement;
//(from && !isChild(from,list)) ||
if(beituo !== this && entered==1 ){
var dt= e.dataTransfer;
var types=dt.types;
//IE types.contains("Text");
//Chrome types[0]==="text/plain";
if(!types || (types[0] && types[0]==="text/plain") || (types.contains && types.contains("Text")))
{
list.className=original_class+" dropable";
return false;
}
return ;
}
return false;
};
/*
function isChild(a,b){
for(;a;a=a.parentNode) {
document.getElementById('count').innerText += (a===b);
if(a===b) return true;
}
return false;
}*/
list.οndragοver=function(e){
// document.getElementById("cont").innerHTML +="over";
if(beituo==this) return true;
return false;
};
list.οndragleave=function(e){
e=e || window.event;
document.getElementById("cont").innerHTML +="leave:" + e.target;
if( e.stopPropagation) e.stopPropagation(); else
e.cancelBubble=true;
if (e.preventDefault) e.preventDefault();else e.defaultValue=false;
var to= e.relatedTarget;
entered--;
// document.getElementById('count').innerText +=entered;
if(beituo !==this && entered<=0){
list.className=original_class;
entered=0;
}
return false;
};
list.οndrοp=function(e){
e=e || window.event;
var dt= e.dataTransfer;
var text=dt.getData("Text");
if(text){
var item=document.createElement("li");
item.draggable=true;
item.appendChild(document.createTextNode(text));
list.appendChild(item);
list.className=original_class;
entered=0;
e.dataTransfer.dropEffect="copy";
return false;
}
}
var items=list.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
items[i].draggable=true;
}
list.οndragstart=function(e){
beituo=this;
document.getElementById("cont").innerHTML +='start';
var e=e || window.event;
var target= e.target || e.srcElement;
if(target.tagName !== "LI") return false;
var dt= e.dataTransfer;
dt.setData("Text",target.innerText || target.textContent);
//为move或者copy时兼容ie chrome
dt.effectAllowed="copy";
}
list.οndragend=function(e){
beituo=null;
document.getElementById("cont").innerHTML +=e.dataTransfer.dropEffect;
e =e || window.event;
var target= e.target || e.srcElement;
if(e.dataTransfer.dropEffect==="move")
target.parentNode.removeChild(target);
}
}
}
</script>
<style>
.dropable{
border:5px solid black;
}
.dnd{
}
li{
background-color:green;
margin:10px;
display: block;
}
ul{
background-color:orange;
height:150px;
border: 5px solid red;
}
</style>
</head>
<body οnlοad="load()" >
<div style="height:100px;background-color:green;"></div>
<ul class="dnd">
<li>li1---1</li>
<li>li1---2</li>
<li>li1---3</li>
</ul>
<div style="height:100px;background-color:green;"></div>
<ul class="dnd" >
<li>li2---1</li>
<li>li2---2</li>
<li>li2---3</li>
</ul>
<div id="count"></div>
<div id="cont"></div>
</body>
</html>
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
