H5拖拽常用属性effectAllowed和 dropEffect

1.dropEffect 表示拖放操作的视觉效果

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

两者的区别：从概念中理解，effectAllowed 比 dropEffect 多了 “允许” 这两个关键字，由此我们可以得知， efectAllowed 是用来限制dropEffect ，是不是有种类似 父亲和儿子的的关系。

根据两者的概念，我们也就可以轻易理解两者的使用规则：

（1）如果effectAllowed属性是定为none,则不允许拖放元素。

（2）如果dropEffect 属性设定为none,则不允许被拖放到目标元素 中。

（3）如果effectAllowed属性设定为all 或不设定，则dropEffect属性允许被设定为任何值。并且按指定的效果显示。

（4）如果effectAllowed属性设定为具体的效果（部位none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果之必须完全相等，否则不允许将被拖放元素拖放到目标元素中

以上内容借用于MapVillage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
上文链接: MapVillage

---

我对上文的理解如下：

effectAllowed是可以控制dropEffect的，在使用dropEffect时，要先使用effectAllowed,且其不可为none，否则不管dropeffect设置为什么，都不会生效
而若dropeffect设置为none，则不管怎样都不会触发drop
先介绍一下两个属性可取的值：
dropeffect可取值：none|copy|link|move
effectAllowed可取值：copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized

所学为：

1.dropEffect：获取当前选定的拖放操作类型或者设置的为一个新的类型，可以改变光标的显示样式，要跟effectAllowed搭配使用，否则不生效。值必须为none|copy|link|move

2.effectAllowed：设置本次拖拉中允许的效果，值为copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized,
只有ondragstart可以用来设置这个属性，其他事件中设置这个属性是无效的。

3.只要dropEffect属性和effectAllowed属性之中，有一个为none，就无法在目标节点上完成drop操作。

实践后的结果是：

当两者都不设置时，效果为拖拽元素进入目标元素后，光标效果为斜箭头+虚线长方形框，长方形框位于箭头的下方，很小
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设置为什么，效果都为正方形框中为一个加号。

是我写的代码有问题吗？完全凸显不出effectAllowed存在的意义

    
    
    


    
    
//目标元素
    
//拖拽元素