js拖拽实现
2015-10-18 16:35
519 查看
拖拽为dragstart-drag-dragenter-dragover-drop-dragend
1 一个div拖到另一个div
<!DOCTYPE html>
<html>
<head>
<title>dragToDrop.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<style type="text/css">
#drop {
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item {
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
</style>
<script type="text/javascript">
var EventUtil={
addHandler:function(element,type,handler){
console.log("绑定事件");
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
console.log("去除事件");
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
console.log("得到事件");
return event?event:window.event;
},
getTarget:function(event){
console.log("得到目标");
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止默认
if(event.preventDefault){
console.log("阻止默认:preventDefault");
event.preventDefault();
}else{
console.log("阻止默认:returnValue=false");
event.returnValue=false;
}
},
stopPropagation:function(event){
console.log("去除冒泡");
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload=function(){
var droptarget=document.getElementById("drop");
EventUtil.addHandler(droptarget, "dragover",function(event){
console.log("--dragover-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter",function(event){
console.log("--dragenter-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "drop",function(event){
console.log("--drop-");
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
event.dataTransfer.dropEffect="copy";
var id=event.dataTransfer.getData("Text");
droptarget.appendChild(document.getElementById(id));
});
var item= document.getElementById("item");
item.setAttribute("draggable","true");
EventUtil.addHandler(item,"dragstart",function(event){
console.log("--dragstart-");
event=EventUtil.getEvent(event);
event.dataTransfer.effectAllowed="copy";
event.dataTransfer.setData("Text",item.id);
});
EventUtil.addHandler(item,"drag",function(event){
console.log("--drag-");
});
EventUtil.addHandler(item,"dragend",function(event){
console.log("--dragend-");
});
};
</script>
</head>
<body>
<div>
<p>把***小方块拖入到红色大方框中--dragstart-drag-dragenter-dragover-drop-dragend</p>
</div>
<div id="item" draggable="true">需要拖放的元素</div>
<div id="drop">拖放的位置</div>
</body>
</html>
2 图片的拖拽
<!DOCTYPE html>
<html>
<head>
<title>dragAndDrop.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<style type="text/css">
.showOne{
background-color:#ffeeaa;
width:300px;
height:300px;
}
</style>
</head>
<body>
<p>
测试元素的拖拽和拖放！（draggable设置元素释放可以被拖拽，draggable="true"表示可拖拽，否则,draggable="false"表示不可拖拽）
<br/>
拖动的目标会触发：dragstart->drag->dragend:
<br/>到目标时，会触发：dragenter->dragover->dragleave(离开)或drop
</p>
可以移动:
<img id="Item" src="./images/1.jpg" alt="图片1无法显示" width="100px" height="100px"/>
<hr/><br/>
不可以移动(通过设置draggable="false")：
<img src="./images/2.jpg" draggable="false" alt="图片1无法显示" width="100px" height="100px"/>
<br/>
<div class="showOne" id="droptarget" >
ff
</div>
<br/>
<script type="text/javascript">
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止默认
if(event.preventDefault){
console.log("阻止默认:preventDefault");
event.preventDefault();
}else{
console.log("阻止默认:returnValue=false");
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
var Item=document.getElementById("Item");//拖放的物体，此即图片
EventUtil.addHandler(Item, "dragstart",function(event){
console.log("--Item-dragstart-");
var target=EventUtil.getTarget(event);
event.dataTransfer.setData("Text",target.id);
});
EventUtil.addHandler(Item,"drag",function(event){
console.log("-Item-drag-");
});
EventUtil.addHandler(Item,"dragend",function(event){
console.log("-Item-dragend-");
});
var droptarget=document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover",function(event){
console.log("--dragover-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter",function(event){
console.log("--dragenter-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "drop",function(event){
console.log("--drop-");
var target=EventUtil.getTarget(event);
var data=event.dataTransfer.getData("Text");
target.appendChild(document.getElementById(data));
EventUtil.preventDefault(event);
});
</script>
</body>
</html>
1 一个div拖到另一个div
<!DOCTYPE html>
<html>
<head>
<title>dragToDrop.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<style type="text/css">
#drop {
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item {
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
</style>
<script type="text/javascript">
var EventUtil={
addHandler:function(element,type,handler){
console.log("绑定事件");
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
console.log("去除事件");
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
console.log("得到事件");
return event?event:window.event;
},
getTarget:function(event){
console.log("得到目标");
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止默认
if(event.preventDefault){
console.log("阻止默认:preventDefault");
event.preventDefault();
}else{
console.log("阻止默认:returnValue=false");
event.returnValue=false;
}
},
stopPropagation:function(event){
console.log("去除冒泡");
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload=function(){
var droptarget=document.getElementById("drop");
EventUtil.addHandler(droptarget, "dragover",function(event){
console.log("--dragover-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter",function(event){
console.log("--dragenter-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "drop",function(event){
console.log("--drop-");
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
event.dataTransfer.dropEffect="copy";
var id=event.dataTransfer.getData("Text");
droptarget.appendChild(document.getElementById(id));
});
var item= document.getElementById("item");
item.setAttribute("draggable","true");
EventUtil.addHandler(item,"dragstart",function(event){
console.log("--dragstart-");
event=EventUtil.getEvent(event);
event.dataTransfer.effectAllowed="copy";
event.dataTransfer.setData("Text",item.id);
});
EventUtil.addHandler(item,"drag",function(event){
console.log("--drag-");
});
EventUtil.addHandler(item,"dragend",function(event){
console.log("--dragend-");
});
};
</script>
</head>
<body>
<div>
<p>把***小方块拖入到红色大方框中--dragstart-drag-dragenter-dragover-drop-dragend</p>
</div>
<div id="item" draggable="true">需要拖放的元素</div>
<div id="drop">拖放的位置</div>
</body>
</html>
2 图片的拖拽
<!DOCTYPE html>
<html>
<head>
<title>dragAndDrop.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<style type="text/css">
.showOne{
background-color:#ffeeaa;
width:300px;
height:300px;
}
</style>
</head>
<body>
<p>
测试元素的拖拽和拖放！（draggable设置元素释放可以被拖拽，draggable="true"表示可拖拽，否则,draggable="false"表示不可拖拽）
<br/>
拖动的目标会触发：dragstart->drag->dragend:
<br/>到目标时，会触发：dragenter->dragover->dragleave(离开)或drop
</p>
可以移动:
<img id="Item" src="./images/1.jpg" alt="图片1无法显示" width="100px" height="100px"/>
<hr/><br/>
不可以移动(通过设置draggable="false")：
<img src="./images/2.jpg" draggable="false" alt="图片1无法显示" width="100px" height="100px"/>
<br/>
<div class="showOne" id="droptarget" >
ff
</div>
<br/>
<script type="text/javascript">
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){ //阻止默认
if(event.preventDefault){
console.log("阻止默认:preventDefault");
event.preventDefault();
}else{
console.log("阻止默认:returnValue=false");
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
var Item=document.getElementById("Item");//拖放的物体，此即图片
EventUtil.addHandler(Item, "dragstart",function(event){
console.log("--Item-dragstart-");
var target=EventUtil.getTarget(event);
event.dataTransfer.setData("Text",target.id);
});
EventUtil.addHandler(Item,"drag",function(event){
console.log("-Item-drag-");
});
EventUtil.addHandler(Item,"dragend",function(event){
console.log("-Item-dragend-");
});
var droptarget=document.getElementById("droptarget");
EventUtil.addHandler(droptarget, "dragover",function(event){
console.log("--dragover-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "dragenter",function(event){
console.log("--dragenter-");
EventUtil.preventDefault(event);
});
EventUtil.addHandler(droptarget, "drop",function(event){
console.log("--drop-");
var target=EventUtil.getTarget(event);
var data=event.dataTransfer.getData("Text");
target.appendChild(document.getElementById(data));
EventUtil.preventDefault(event);
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 实现一个网页，然后计算出有多少剩余时间的倒计时程序
- JS中如何输出空格
- JSP的内置对象
- 你不知道的JavaScript--Item11 arguments对象
- 你不知道的JavaScript--Item11 arguments对象
- js定时器 setTimeout
- 详解js闭包
- fullpage.js
- javascript中获取Dajango里Tastypie所传过来的数据
- JSP自定义标签详解
- Js作用域与作用域链详解
- diango json
- 前台 JS 获取后台C#值
- js接收后台时间数据变成秒处理为正常格式
- Extjs用ajax提交表单四种方式
- 《编写可维护的JavaScript》笔记
- js编程题以及答案
- JSON与XML的区别比较【转载】
- 使用Backbone.js实现级联选择框
- 你不知道的JavaScript--Item10 闭包（closure）