dropEffect 拖放操作的视觉效果
DataTransfer.dropEffect 属性控制在拖放操作中给用户的反馈
会影响在拖拽过程中光标的手势
https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/dropEffect

当两者都不设置时，效果为拖拽元素进入目标元素后，光标效果为斜箭头+虚线长方形框，长方形框位于箭头的下方，很小只设置dropEffect为link,无effectAllowed时，也会生效，产生效果。

dropEffect为link 效果为在长方形框的右下方会出现一个白底的正方形框，其中有黑色箭头。
dropEffect为move 无变化
dropEffect为copy 正方形框中为一个加号
dropEffect为none 箭头整个变为黑框圆圈+经圆心的斜线

只设置effectAllowed,无dropEffect时，不会产生效果
dropEffect设置为none，不论effectAllowed设置为什么，效果都为箭头整个变为黑框圆圈+经圆心的斜线
dropEffect设置为link，不论effectAllowed设置为什么，效果都为在长方形框的右下方会出现一个白底的正方形框，其中有黑色箭头。
dropEffect设置为move，不论effectAllowed设置为什么，效果都无变化
dropEffect设置为copy，不论effectAllowed设置为什么，效果都为正方形框中为一个加号
去掉鼠标拖拽时的十字圆圈

  1. function onDragOver(e) {
  2.   e.preventDefault();
  3.   e.dataTransfer.dropEffect = "move"
  4.   if(!e.target) return;
  5.   // console.log('over',  e.target)
  6. }

effectAllowed

effectAllowed 用来指定当元素被拖放式所允许的视觉效果

effectAllowed属性是定为none，不允许拖放元素。
dropEffect 属性设定为none，不允许被拖放到目标元素中。
effectAllowed属性设定为all 或不设定，dropEffect属性允许被设定为任何值。并且按指定的效果显示
effectAllowed属性设定为具体的效果（部位none、all）
dropEffect属性也设定了具体视觉效果，则两个具体效果之必须完全相等，否则不允许将被拖放元素拖放到目标元素中

effectAllowed是可以控制dropEffect的，在使用dropEffect时

  • 要先使用effectAllowed,且其不可为none，否则不管dropeffect设置为什么，都不会生效
  • 若dropeffect设置为none，则不管怎样都不会触发drop ```javascript dropeffect可取值：none|copy|link|move

effectAllowed可取值：copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized

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