foreword
Drag and drop is a common feature where an object is grabbed and then dragged to another location. In H5, any element supports drag and drop, but it should be noted that some elements have default behavior (such as a element), and the default behavior of this element should be cancelled.
Use preventDefault() to cancel the default action of the event
drag and drop event
Drag element - event:
| event | describe |
|---|---|
| contract start | Fired when the element starts being dragged - start dragging |
| unbearable | Triggered by drag source - dragging |
| uncaring | The drag source will get the dragend object (whether successful or not) at the end of the drag operation - drag end |
Note: the ondrag event is always triggered while dragging the element, as you will see in the following examples.
Drop element - event:
| event | describe |
|---|---|
| onbearer | Fired when the mouse enters an element for the first time during a drag |
| ondragover | Fired when the dragging mouse moves over an element |
| ondragleave | Fired when the dragging mouse leaves the element |
| ondrop | Fired when the drag operation ends and is released on the dropped element |
Note: Only related events are triggered when dragging, and mouse events will not be triggered.
dataTransfer object
| properties/methods | describe |
|---|---|
| files | Its property returns all files related to the put |
| types | The property returns the currently registered formats as an array |
| effectAllowed | This attribute informs the browser of the actions currently available to the user |
| dropEffect | The operation type of drag and drop determines how the browser displays the mouse shape |
| items | Property returns all items with all files of the associated format |
| setData(format,data) | Call this function in the dragstart event to store data in the dataTransfer object |
| getData(format) | Get data from dataTransfer object |
| setDragImage(element,x,y) | Use an existing image element as the drag image |
| addElement(element) | Provide a page element as a reference while using this parameter as a drag and drop feedback image |
| clearData() | Indicates to clear all registered data, and clears the specified registered data with parameters (this method does not need to pass parameter 99) |
| For specific API, please refer to: https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer |
Let's look at a small example first
It should be noted that if you want to make an element draggable, you must set the draggable attribute of the element to "true" to allow dragging.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放API</title>
<style>
section{
background:red;
border-radius:50%;
width:100px;
height:100px
}
</style>
</head>
<body>
<section draggable="true" id="demo"></section>
<script>
// 获取元素DOM
var demo = document.querySelector('#demo')
// 开始拖动
demo.ondragstart = function (){
console.log('开始拖动')
}
// 正在拖动
demo.ondrag = function (){
console.log('正在拖动(此事件一直触发，除非结束)')
}
// 结束拖动
demo.ondragend = function (){
console.log('结束拖动')
}
</script>
</body>
</html>
Start dragging—dragging—dropping
At this point, the console prints the results as follows:
demo
When performing a drag and drop operation, the dataTransfer object can be used to save the data being dragged. It can hold one or more data, one or more data types. In layman's terms, the dragged data can be transmitted through it, so that other operations can be performed on the data when the drag ends.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放API</title>
<style>
.element{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
section{
width:150px;
height:150px;
background:black;
}
</style>
</head>
<body>
<p>请把小球元素拖到这里：</p>
<section id="container"></section>
<hr>
<div id="e1" class="element" draggable="true">1号</div>
<div id="e2" class="element" draggable="true">2号</div>
<div id="e3" class="element" draggable="true">3号</div>
<script>
// 获取所有 .element DOM节点
var elements = document.querySelectorAll('.element')
// 获取 #container DOM节点
var container = document.getElementById('container')
// 遍历(拖动动作)
for(var i = 0, len = elements.length; i < len; i++){
elements[i].ondragstart = function (e){
// dataTransfer对象中存储数据
e.dataTransfer.setData('id',this.id)
}
}
// 取消默认事件(否则无法放置)
// 其他方法：container.ondragover = function (even){
// even.preventDefault()
// }
container.ondragover = () => {
return false}
// 放置 .element DOM节点(放下)
container.ondrop = function (e){
// 获取 dataTransfer对象数据
var id = e.dataTransfer.getData('id')
// 根据 id 添加到容器
let Flag = document.getElementById(id)
this.appendChild(Flag)
// 控制台查看小球id
console.log(`您当前放置的小球是:【${
id}】`)
}
</script>
</body>
</html>
Not dragged in:
Dragged in:
Note: In other events (such as ondragover, ondragleave, etc.), it is impossible to get the value in dataTransfer. This is due to the W3C requirement to protect the values in dataTransfer. Therefore, if you need to obtain data in these events, you can only achieve it through a global variable or other methods.