今天介绍下js原生拖拽的简单介绍

1.首先.draggable：设置为true，元素就可以拖拽了

2.拖拽动作

拖拽元素事件：事件对象为被拖拽元素

• ——dragstart,拖拽前触发
• ——drag,拖拽前、拖拽结束之间，连续触发
• ——dragend,拖拽结束触发

目标元素事件：事件对象为目标元素

• ——dragenter,进入目标元素触发，相当于mouseover
• ——dragover,进入目标、离开目标之间，连续触发
• ——dragleave,离开目标元素触发，，相当于mouseout
• ——drop,在目标元素上释放鼠标触发

\

3.参考代码如下

4.dropEffect和effectAllowed介绍

当两者都不设置时，效果为拖拽元素进入目标元素后，光标效果为斜箭头+虚线长方形框，长方形框位于箭头的下方，很小

1.与所学不同，当只设置dropEffect为link,无effectAllowed时，也会生效，产生效果。

dropEffect为link 效果为在长方形框的右下方会出现一个白底的正方形框，其中有黑色箭头。

dropEffect为move 无变化

dropEffect为copy 正方形框中为一个加号

dropEffect为none 箭头整个变为黑框圆圈+经圆心的斜线

2.当只设置effectAllowed,无dropEffect时，不会产生效果

3.dropEffect设置为none，不论effectAllowed设置为什么，效果都为箭头整个变为黑框圆圈+经圆心的斜线

4.dropEffect设置为link，不论effectAllowed设置为什么，效果都为在长方形框的右下方会出现一个白底的正方 形框，其中有黑色箭头。

5.dropEffect设置为move，不论effectAllowed设置为什么，效果都无变化

6.dropEffect设置为copy，不论effectAllowed设置为什么，效果都为正方形框中为一个加号。