HTML5 Drag and Drop
Definition:
Drag-and-drop is a common feature where an object is grabbed and then dragged to another location.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.
1. Let’s talk about “drag and drop events”
Drag and drop events, that is, grabbing an object and dragging it to another Location
Some events are triggered on the element being dragged and dropped, and some are triggered on the drop target. When an element is dragged, the dragstart event, drag event, and dragend event are triggered in sequence; when an element is dragged to a valid drop target, the dragenter event, dragover event, dragleave, or drop event is triggered in sequence.
2. Implementation process
Set elements as draggable
<img draggable="true ">
Drag what? When an element is dragged, events occur (ondragstart and setData())
ondragstart attribute calls a function, drag(event) specifies to see the dragged data, dataTransfer.setData() sets the drag and drop The data type and value of the data.
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
Where to put it? The ondragover event specifies where to place the dragged data
By default, data/elements cannot be placed into other elements. If you need to allow placement, you must prevent the default handling of the element. Therefore, ondrop needs to be placed through the event.preventDefault() method in the ondragover event
event.preventDefault()
##First call preventDefault() To avoid the browser's default processing of data; then obtain the dragged data through the dataTransfer.getData("Text") method. The dragged data is the id of the dragged element; finally, the dragged element is appended to the placed element.
function drop(ev)
{
##ev.preventDefault();var data=ev.dataTransfer.getData("Text");
##ev.target.appendChild(document.getElementById(data));
}
##Drag and Drop (Drag and Drop) life cycle of each attribute Just now you have seen some new attribute terms, such as ondragstart. Maybe it's still unfamiliar, and I don't know why. It may be suddenly clear to you by looking at a table below: Drag life cycle Attribute Value Description Drag start ondragstart script in Execute the script when the drag operation starts (the object is the dragged element) During the dragging process ondrag script The script is allowed as long as the script is being dragged (the object is the dragged element) During the dragging process ondragenter script When the element is dragged to a legal placement target, the script is executed (the object is the target element) During the dragging process ondragover script As long as the element is dragged on the legal placement target , execute the script (the object is the target element) During the dragging process ondragleave script When the element leaves the legal placement target (the object is the target element) Drag ends ondrop script will be dragged Run the script when the dragged element is placed in the target element (the object is the target element) Drag ends ondragend script Run the script when the drag operation ends (the object is the dragged element)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
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){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
