头像

HTML5之位置拖放

来源:http://www.daimasucai.com/html5/31.html 代码素材管理员 2016-09-10浏览()

拖放(Drag &Drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。过去,我们用监听鼠标的Mousedown、Mouseove、Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置,而现在html5原生的Drag &Drop事件(DnD),方便了许多,而且性能也有了提高。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

HTML5之位置拖放
分类:首页>>网页特效>>html5 阅读次数:
查看演示 下载次数: 6

手机扫码访问:

下载资源 下载积分: 1

  如何使对象能够被拖动

    <div draggabl

  意:在大多数浏览器中,a元素和img元素默认就是可以拖放的,但是为了保险起见,最好还是加上draggable属性。

  拖动事件dragstart:网页元素开始拖动时触发。

  drag:被拖动的元素在拖动过程中持续触发。

  dragenter:被拖动的元素进入目标元素时触发,应在目标元素监听该事件。

  dragleave:被拖动的元素离开目标元素时触发,应在目标元素监听该事件。

  dragover:被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件。

  drap:被拖动元素或从文件系统选中的文件,拖放落下时触发。

  dragend:网页元素拖动结束时触发。

  注意:以上这些事件都可以指定回调函数。

  上面代码在拖动开始时,在dataTransfer对象上储存一条文本信息,内容为“Helloweba”。当拖放结束时,可以用getData方法取出这条信息。

  dataTransfer对象的属性:

  effectAllowed:指定所允许的操作,可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized(默认值,等同于all,即允许一切操作)。

  files:包含一个FileList对象,表示拖放所涉及的文件,主要用于处理从文件系统拖入浏览器的文件。

  types:储存在DataTransfer对象的数据的类型。

  dataTransfer对象的方法:

  setData(format, data):在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型,比如text、url、text/html等。

  getData(format):从dataTransfer对象取出数据。

  clearData(format):清除dataTransfer对象所储存的数据。如果指定了format参数,则只清除该格式的数据,否则清除所有数据。

  setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下,许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素,而不是指向图像的路径,参数x和y表示图像相对于鼠标的位置。

  dataTransfer对象允许在其上存储数据,这使得在被拖动元素与目标元素之间传送信息成为可能。


标签: HTML5置拖放 HTML5
声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:http://www.daimasucai.com/html5/31.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>