就想游城市

快捷导航
登录 |注册居民 |
查看: 845|回复: 1

[分享] 用HTML5原生实现拖放或排序

[复制链接]

63

主题

82

帖子

-3

积分

无业游民

积分
-3
发表于 2016-3-19 03:27:11 | 显示全部楼层 |阅读模式
拖放是一种很常见的功能,现在这个功能已经成为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"></div>
  • <div class="dragdrop">
  •     <img id="drag1" src="/img/ad_ourjs.jpg" draggable="true">
  • </div>

[color=rgb(51, 102, 153) !important]复制代码

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

需要设置 draggable 属性

  • <img draggable="true">

[color=rgb(51, 102, 153) !important]复制代码

第二步: 拖放什么

在 ondragstart 事件中通过 dataTransfer.setData 设置拖放的元素
  • function drag(ev) {
  •     ev.dataTransfer.setData("text", ev.target.id);
  • }

[color=rgb(51, 102, 153) !important]复制代码

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

第三步: 拖放到什么地方

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

[color=rgb(51, 102, 153) !important]复制代码

第四步: 放置

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

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


[color=rgb(51, 102, 153) !important]复制代码







这里通过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()  设置拖放时的自定义图标

这是个寂寞却幸福的城市,这是个声音与耳朵相恋的城市 93you.com

0

主题

5

帖子

56

积分

新驻居民

Rank: 1

积分
56
发表于 2016-4-1 12:23:32 | 显示全部楼层
重要的东西
您需要登录后才可以回帖 登录 | 注册居民

本版积分规则

就想游设计 ( 桂ICP备13002329 | 桂公网安备 45030502000286号 )|手机版|Archiver|

Powered by Discuz! X3.4© 2007-2017 就想游城市原创风格 Jokke design

GMT+8, 2020-8-16 04:23