OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用HTML5原生实现拖放或排序


分享到
分类 JS学习   关键字 JavaScript   发布 kris  1454317964410
注意 转载须保留原文链接,译文链接,作者译者等信息。  

原生拖放


拖放是一种很常见的功能,现在这个功能已经成为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实现转移拖放对象,同理可通过放置在不同位置实现排序。



相关事件

在拖放对象上触发的事件
    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

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 轻量级的可调视图和面板分栏Layout布局工具[开源]
  2. 八张图告诉你什么是大数据
  3. 什么是Spark,如何使用Spark进行数据分析
  4. NodeJS将有望使用微软的ChakraCore JavaScript引擎驱动
  5. 快速激发灵感的7个安卓应用模板
  6. 使用Node.js操作跨平台数据库Firebird
  7. 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘(数字)
  8. 如何用CSS将select/option文本居中或居右对齐
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘(数字)
  3. 掌握Node.js的文件系统[File System 基础]
  4. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  5. ES6中的Map与JSON的相互转化(序列和持久化)
  6. 用jQuery和JavaScript深度复制JSON对象的方法
  7. Node.js中的通用基础设计模式
  8. WowJS:在滚动页面时添加动画效果的简单实现
  9. [PPT]JavaScript初级教程
  10. JavaScript中的哈希表(Hash Maps的最佳实践)

 关键字 - JavaScript
  1. 7个最新的实用性 JavaScript MV*框架
  2. 抛弃jQuery,深入原生的JavaScript
  3. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  4. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  5. 用HTML5原生实现拖放或排序
  6. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  7. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  8. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  9. JavaScript中NaN的秘密
  10. 从一行CSS调试代码中学到的JavaScript知识

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号