HTML5&JS-draggable属性&dragEvent

drag事件

当元素或者选择的文本被拖动时触发 drag 事件,并且在拖拽未结束之前每隔几百毫秒触发一次drag事件

dragstart事件

dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。

dragend事件

dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。

dragenter事件

dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。

dragover事件

dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。

dragleave事件

dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。

dragEvent

用于表示拖、放交互的DOM event接口

属性&方法

• dataTransfer(只读) ：保存着拖拽操作中的数据，dataTransfer的对象（其中保存着数据）

  • dataTransfer中包含的属性

    • dropEffect：表示拖放过程中给用户的反馈，会影响拖拽过程中鼠标光标的手势，似如hover的鼠标手势变化

      • 值:

        • none(默认):可能禁止拖拽（说可能是因为，还与effectAllow又关）

        • move:将元素移动到新位置

        • copy:新位置产生原元素的副本

        • link:新位置产生原项目的链接

    • effectAllow：允许dropEffect的行为发生

      • 值

        • uninitialized(效果没有设置时的默认值<=>all)

        • none 此项表示不允许放下

        • copy源项目的复制项可能会出现在新位置。

        • copyLink允许 copy 或者 link 操作。

        • copyMove允许 copy 或者 move 操作。

        • link可以在新地方建立与源的链接。

        • linkMove允许 link 或者 move 操作。

        • move一个项目可能被移动到新位置

        • all允许所有的操作。

    • setData:[ function ]用于存储拖拽时想要存储的数据

      /* @params:
                arg1[String]:要存储的数据的数据类型：如果数据类型不存在,将数据存储到列表的最后一项，使得 types 列表中的最后一个项目将是新类型。
                arg2[String]:要存储的数据
       */
      dataTransfer.setData(arg1,arg2);

    • getData:[function]用于获取存储的数据

      dataTransfer.getData('dataName');

赏

谢谢你请我吃糖果