html5 guide-3. How to implement the drag and drop function of html elements_html5 tutorial skills

The content of this article is about how to implement the drag and drop function of html elements in html5. Before html5, to implement drag and drop, you needed to use js. Now html5 supports the drag and drop function internally, but to implement slightly more complex functions, the help of js is still indispensable. Let's look at a few examples below.
1. Create a drag object
We can tell the browser which elements need to implement dragging function through the draggable attribute. draggable has three values: true: the element can be dragged; false: the element cannot be dragged; auto: the browser determines whether the element can be dragged.
The system default value is auto, but in the auto case, browsers have different support for the drag and drop function of different elements. For example, img objects are supported but div objects are not supported. Therefore, if you need to drag an element, it is best to set draggale to true. Let’s look at an example below:

Copy the code

The code is as follows:

drop here

<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br /></script>

Operation effect:

2. Handling drag events
Now let’s learn about drag-related events. There are two types of events, one is the event of the drag object, and the other is the event of the drop area event. Drag events include: dragstart: triggered when the element dragging starts; drag: triggered during the element dragging process; dragend: triggered when the element dragging ends. Let’s look at an example below:

Copy the code

The code is as follows:

drop here

<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br />var msg = document.getElementById("msg"); <br />src.ondragstart = function (e) { <br />e.target.classList.add("dragged"); <br />} <br />src. ondragend = function (e) { <br />e.target.classList.remove("dragged"); <br />msg.innerHTML = "drop here"; <br />} <br />src.ondrag = function (e) { <br />msg.innerHTML = e.target.id; <br />} <br /></script>

Operating effect:

3. Create a drop area
Let’s look at the events related to the drop area: dragenter: triggered when the drag object enters the drop area; dragover: triggered when the drag object moves within the drop area ; dragleave: Triggered when the drag object is not placed in the drop area and leaves the drop area; drop: Triggered when the drag object is placed in the drop area.
Let’s look at an example:

Copy the code

The code is as follows:

< ;img draggable="true" id="car2" src="img/2.jpg" alt="car2" />

drop here

<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br />var msg = document.getElementById("msg"); <br />var draggedID; <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var newElem = document.getElementById(draggedID).cloneNode(false); <br />target.innerHTML = "" ; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />draggedID = e.target.id; <br /> e.target.classList.add("dragged"); <br />} <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); <br />for ( var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br />} <br /></script>

Run result:

4. Use DataTransfer
We use DataTransfer to transfer data from the drag object to the drop area. DataTransfer has the following properties and methods: types: returns the format of the data; getData(): returns the data in the specified format; setData(, ): sets the data in the specified format; clearData(): removes the specified format data; files: returns an array of files that have been delivered.
Let’s look at the following example, which achieves the same effect as Example 3:

Copy the code

The code is as follows :

drop here

<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var droppedID = e.dataTransfer.getData("Text"); <br />var newElem = document.getElementById(droppedID).cloneNode(false); <br />target.innerHTML = ""; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />e.dataTransfer.setData("Text", e.target.id); <br />e.target.classList.add("dragged"); <br />} <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); <br />for (var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br />} <br /></script>

5.拖拽文件
html5支持file api，可以让我们操作本地文件。一般我们不直接使用file api，我们可以结合其他特性一起使用，比如结合拖拽特效，如下例：

复制代码

代码如下:

Drop Files Here

<script> <br />var target = document.getElementById("target"); <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var files = e.dataTransfer.files; <br />var tableElem = document.getElementById("data"); <br />tableElem.innerHTML = "<tr><th>Name<th>Type<th>Size"; <br />for (var i = 0; i < files.length; i ) { <br />var row = "<tr><td>" files[i].name "<td>" files[i].type "<td>" files[i].size ""; <br />tableElem.innerHTML = row; <br />} <br />e.preventDefault(); <br />} <br /></script>

DataTransfer returns a FileList object, which we can regard as a file array object. file contains the following attributes: name: file name; type: file type (MIME type); size: file size.
Operating effect:

6. Upload files
The following is an example of uploading files by dragging ajax.

Copy code

The code is as follows:

Bananas:

div>

Apples:

Cherries:

File:

Total:

items

Drop Files Here

Submit Form

Effect:

Some of the above examples may have different operating results in different browsers. I am using the Chrome browser. Except for Examples 5 and 6 which do not support multiple files, the other examples run normally. You can download the demo.
Demo download address: Html5Guide.draggable.rar