资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何实现html元素拖拽功能

这篇文章主要讲解了“如何实现html元素拖拽功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现html元素拖拽功能”吧!

公司主营业务:做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出江苏免费做网站回馈大家。


1.创建拖拽对象
我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。
系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:

代码如下:





Example




car1
car2
car3


drop here







运行效果:

如何实现html元素拖拽功能


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

代码如下:





Example




car1
car2
car3


drop here







运行效果:

如何实现html元素拖拽功能


3.创建投放区
我们来看投放区相关的事件:dragenter:当拖拽对象进入投放区时触发;dragover:拖拽对象在投放区内移动时触发;dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;drop:拖拽对象投放在投放区时触发。
我们来看一个例子:

代码如下:





Example




car1
car2
car3


drop here







运行结果:

如何实现html元素拖拽功能

如何实现html元素拖拽功能


4.使用DataTransfer
我们使用DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法:types:返回数据的格式;getData():返回指定格式数据;setData(, ):设置指定格式数据;clearData():移除指定格式数据;files:返回已经投放的文件数组。 
我们来看下面的例子,他实现的效果和例3一样:

代码如下:





Example




car1
car2
car3


drop here







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

代码如下:





Example





Drop Files Here








DataTransfer返回FileList对象,我们可以把他当做file数组对象,file包含下面属性:name:文件名字;type:文件类型(MIME类型);size:文件大小。
运行效果:

如何实现html元素拖拽功能

如何实现html元素拖拽功能

如何实现html元素拖拽功能


6.上传文件
下面介绍一个通过拖拽ajax上传文件的实例。

代码如下:





Example







Bananas:






Apples:






Cherries:






File:






Total:


items





Drop Files Here








效果:

如何实现html元素拖拽功能

上面的一些例子不同浏览器运行效果可能不同,我用的是chrome浏览器,除了例5和6不支持多文件外,其他例子运行正常。大家可以下载demo。
demo下载地址:Html5Guide.draggable.rar

感谢各位的阅读,以上就是“如何实现html元素拖拽功能”的内容了,经过本文的学习后,相信大家对如何实现html元素拖拽功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


标题名称:如何实现html元素拖拽功能
网站路径:http://cdkjz.cn/article/jdehig.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220