本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。
1.创建拖拽对象
我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。
系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持div对象。所以，如果需要拖拽一个元素，最好还是把draggale设置为true。下面我们看一个例子：
drop here
<script> <br>var src = document.getElementById("src"); <br>var target = document.getElementById("target"); <br></script>
运行效果：
2.处理拖拽事件
现在我们来了解拖拽相关的事件，有两种类型的事件，一种是拖拽对象的事件，一种是投放区的事件。拖拽事件包括：dragstart：当元素拖拽开始触发；drag：在元素拖拽过程中触发；dragend：元素拖拽结束时触发。下面我们就看一个例子：
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>
运行效果：
3.创建投放区
我们来看投放区相关的事件：dragenter：当拖拽对象进入投放区时触发；dragover：拖拽对象在投放区内移动时触发；dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；drop：拖拽对象投放在投放区时触发。
我们来看一个例子：
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>
运行结果：
4.使用DataTransfer
我们使用DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法：types：返回数据的格式；getData(
我们来看下面的例子，他实现的效果和例3一样：
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返回FileList对象，我们可以把他当做file数组对象，file包含下面属性：name：文件名字；type：文件类型（MIME类型）；size：文件大小。
运行效果：
6.上传文件
下面介绍一个通过拖拽ajax上传文件的实例。
<script type="text/javascript"> <br>var target = document.getElementById("target"); <br>var httpRequest; <br>var fileList; <br>target.ondragenter = handleDrag; <br>target.ondragover = handleDrag; <br>function handleDrag(e) { <br>e.preventDefault(); <br>} <br>target.ondrop = function (e) { <br>fileList = e.dataTransfer.files; <br>e.preventDefault(); <br>} <br>document.getElementById("submit").onclick = function handleButtonPress(e) { <br>e.preventDefault(); <br>var form = document.getElementById("fruitform"); <br>var formData = new FormData(form); <br>if (fileList) { <br>for (var i = 0; i < fileList.length; i++) { <br>formData.append("file" + i, fileList[i]); <br>} <br>} <br>httpRequest = new XMLHttpRequest(); <br>httpRequest.onreadystatechange = handleResponse; <br>httpRequest.open("POST", form.action); <br>httpRequest.send(formData); <br>} <br>function handleResponse() { <br>if (httpRequest.readyState == 4 && httpRequest.status == 200) { <br>var data = JSON.parse(httpRequest.responseText); <br>document.getElementById("results").innerHTML = "You ordered " + data.total + " items"; <br>} <br>} <br></script>
效果：
上面的一些例子不同浏览器运行效果可能不同，我用的是chrome浏览器，除了例5和6不支持多文件外，其他例子运行正常。大家可以下载demo。
demo下载地址：Html5Guide.draggable.rar
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
