欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

用HTML5原生实现拖放或排序_html/css_WEB-ITnose

程序员文章站 2022-04-06 14:49:34
...

原生拖放

拖放是一种很常见的功能,现在这个功能已经成为Html5标准的一部分。通过html5只需要简单几行代码即可实现拖放,比如下面这个例子,你可以将此图片上下拖放。

示例代码

用HTML5原生实现拖放或排序_html/css_WEB-ITnose

代码步骤

第一步: 要让一个元素可拖放

需要设置 draggable 属性

用HTML5原生实现拖放或排序_html/css_WEB-ITnose

第二步: 拖放什么

在 ondragstart 事件中通过 dataTransfer.setData 设置拖放的元素

function drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);}

在这种情况下,是通过传递被拖放对象的ID来操作的,所以类型是"text"

第三步: 拖放到什么地方

通过 ondragover实现, 通常情况下,元素可能会被拖放到其它地方,当一个容器允许放置时,只需要在ondragover事件中 preventDefault 即可

function allowDrop(ev) {    ev.preventDefault();}

第四步: 放置

在drop事件中将对象"转移"到容器中

function drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));}

这里通过appendChild实现转移拖放对象,同理可通过放置在不同位置实现排序。

相关事件

在拖放对象上触发的事件

ondragstart - 当用户开始拖放时

ondrag - 当用户正在拖放时

ondragend - 当用户拖放结束时

在放置对象(容器)上触发的事件

ondragenter - 当拖放对象进入容器时(首次)

ondragover - 当拖放对象经过容器时

ondragleave - 当拖放对象离开窗口时

ondrop - 当拖放对象释放到容器中时

DataTransfer

标准属性

DataTransfer.dropEffect 拖放的操作类型: copy、move、link 或 none (复制、移动创建链接等)

DataTransfer.effectAllowed 播放允许的类型: 比如有些容器只能复制,有些只允许移动等

DataTransfer.files 存放一些拖放的本地文件,如果没有拖放文件,则此列表为空

DataTransfer.items 只读 DataTransferItemList 对象

DataTransfer.types 只读 dragstart事件中指定的拖放类型

标准方法

DataTransfer.clearData() 清除指定类型的拖放数据

DataTransfer.getData() 获取指定类型的数据

DataTransfer.setData() 设置指定类型的数据

DataTransfer.setDragImage() 设置拖放时的自定义图标

支持: IE9及以上

参考:

http://www.w3schools.com/html/html5_draganddrop.asp

http://www.w3schools.com/jsref/event_ondragstart.asp

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer