面试知识点总结 - js 拖放

被拖放元素

1. 任何元素都可以作为拖放元素
2. 除了图片、链接、文本（被选中的情况下）可以被拖动，其他元素默认是不能被拖放的，可以在元素标签中设置draggable=‘true’，可以让其他元素可以拖放
3. 被拖放元素上的事件：

1. dragstart：按下鼠标键并开始移动鼠标时触发
2. drag：元素被拖动期间持续触发
3. dragend：拖动停止时触发（无论是把元素放到有效还是无效的放置目标上）

4. 拖动期间浏览器默认不会改变拖动元素的外观，会为该拖动元素创建一个半透明的副本，该副本跟随光标移动

作为放置目标的元素

1. 任何元素都可以作为放置目标元素
2. 当拖动元素到某些不能放置的目标时，会出现不能放置标识（圆圈里面一个斜线），可以在放置目标的事件（dragenter、dragmove、drop）中重写默认行为ele.preventDefault()
3. 作为放置目标的元素上的事件：

1. dragenter：元素被拖动到放置目标上时触发，类似mouseover
2. dragmove：被拖动元素在放置目标的范围内移动时持续触发
3. dragleave：元素被拖出了放置目标时触发，类似mouseout
4. drop：元素被放到了放置目标时触发

拖放过程中的数据传输

1. event的dataTransfer属性，可以用于数据传输
2. dataTransfer.getData(保存的数据类型的字符串)：要在drop事件中获取，保存的数据类型可以为’text’或’text/plain’、‘URL’或’text/uri-list’，为MIME类型
3. dataTransfer.setData(保存的数据类型的字符串，传输的数据)：要在dragstart事件中写入
4. dataTransfer.dropEffect属性：指定被拖动的元素执行的放置行为
   none：不能把拖动元素放在这里
   move：应该把拖动元素移动到放置目标
   copy：应该把拖动元素赋值到放置目标
   link：表示放置目标会打开拖动元素（但拖动元素必须是一个链接，有URL）
5. dataTransfer.effectAllowed属性：要配合dropEffect使用才有效，指定允许拖动元素的哪种dropEffect
   none：被拖动的元素不能有任何行为
   copy：只允许值为copy的dropEffect
   move：只允许值为move的dropEffect
   link：只允许值为link的dropEffect
   copyMove：允许值为copy和move的dropEffect
   copyLink：允许值为copy和link的dropEffect
   linkMove：允许值为link和move的dropEffect
   all：允许任意dropEffect