首页  >  文章  >  web前端  >  html5指南-3.如何实现html元素拖拽功能_html5教程技巧

html5指南-3.如何实现html元素拖拽功能_html5教程技巧

WBOY
WBOY原创
2016-05-16 15:50:161918浏览

本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽,需要借助js,现在html5内部就支持了拖拽的功能,但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。
1.创建拖拽对象
我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。
系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:

复制代码
代码如下:




Example




car1
car2
car3


drop here




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



运行效果:


2.处理拖拽事件
现在我们来了解拖拽相关的事件,有两种类型的事件,一种是拖拽对象的事件,一种是投放区的事件。拖拽事件包括:dragstart:当元素拖拽开始触发;drag:在元素拖拽过程中触发;dragend:元素拖拽结束时触发。下面我们就看一个例子:

复制代码
代码如下:




Example




car1
car2
car3


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:拖拽对象投放在投放区时触发。
我们来看一个例子:

复制代码
代码如下:




Example




car1
car2
car3


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():返回指定格式数据;setData(, ):设置指定格式数据;clearData():移除指定格式数据;files:返回已经投放的文件数组。 
我们来看下面的例子,他实现的效果和例3一样:

复制代码
代码如下:




Example




car1
car2
car3


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,我们可以结合其他特性一起使用,比如结合拖拽特效,如下例:

复制代码
代码如下:




Example





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上传文件的实例。

复制代码
代码如下:




Example







Bananas:






Apples:






Cherries:






File:






Total:


items





Drop Files Here









效果:

上面的一些例子不同浏览器运行效果可能不同,我用的是chrome浏览器,除了例5和6不支持多文件外,其他例子运行正常。大家可以下载demo。
demo下载地址:Html5Guide.draggable.rar
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn