转载

用HTML5原生实现拖放或排序

原生拖放

拖放是一种很常见的功能，现在这个功能已经成为Html5标准的一部分。通过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)">
</div>

代码步骤

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

需要设置 draggable 属性

<img draggable="true">

第二步：拖放什么

在 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实现转移拖放对象，同理可通过放置在不同位置实现排序。

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

原文 http://ourjs.com/detail/56af218c88feaf2d031d2465

正文到此结束

所属分类：编程技术

本文标签： js App https 代码 ip HTML5 http web API src 数据 Developer UI list tar Document HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二