用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"></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()　　设置拖放时的自定义图标

azhai

重要的东西