Heim > Web-Frontend > HTML-Tutorial > 用HTML5原生实现拖放或排序_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 08:57:53
Original
1148 Leute haben es durchsucht

原生拖放

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

示例代码

<script>function allowDrop(ev) {    ev.preventDefault();}function drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));}</script><div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)">    <img  id="drag1" src="/img/ad_ourjs.jpg" draggable="true" ondragstart="drag(event)" alt="用HTML5原生实现拖放或排序_html/css_WEB-ITnose" ></div>
Nach dem Login kopieren

代码步骤

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

需要设置 draggable 属性

<img  draggable="true" alt="用HTML5原生实现拖放或排序_html/css_WEB-ITnose" >
Nach dem Login kopieren

第二步: 拖放什么

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

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

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

第三步: 拖放到什么地方

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

function allowDrop(ev) {    ev.preventDefault();}
Nach dem Login kopieren

第四步: 放置

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

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

这里通过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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage