xinglie / xinglie.github.io

blog
https://xinglie.github.io
153 stars 22 forks source link

拖动dataTransfer #113

Open xinglie opened 9 months ago

xinglie commented 9 months ago

我们仅讨论拖动普通元素时的dataTransfer对象

effectAllowed

该属性需要在dragstart中设置,不过需要注意的是,如果不设置该属性,它并不总是为alluninitialized

如果可以,请始终设置且不要设置成all,设置成具体的如copyMove兼容性会更好

dropEffect

该属性仅可设置effectAllowed指定的值,该属性会影响鼠标样式的展现

如果设置该属性不生效,请检查effectAllowed是不是不包含你设置的值或effectAllowed已经是none

另外需要注意的是,在拖动过程中某些键盘按键会导致effectAllowed变化,比如mac下的metaKey会影响effectAllowed

我们可以这样解决

a. 在dragover中检测effectAllowed的变化 b. 如果effectAllowed有变化,我们在当前节点派发dragleave再派发dragenter事件 c. 在drop事件中检测dropEffect来决定对本次拖动是否生效