H5提供了 拖放(Drag and Drop)事件,【 drag & drop 】API 中 DataTransfer 對象,來配置拖拽行為的鼠標效果
DataTransfer對象具有effectAllowed 和 dropEffect兩個屬性。 effectAllowed 和 dropEffect 最主要的作用是,用於配置拖拽操作過程中鼠標指針的類型以便提示用戶后續可執行怎樣的操作;其次的作用是,控制 drop 事件的觸發與否。下面我們來看看effectAllowed 和 dropEffect兩個屬性的介紹,看看他們是如何控制鼠標指針樣式的
effectAllowed:
1.屬性作用:用於設置被拖拽元素可執行的操作。
2.取值范圍:
copy ,限定dropEffect的屬性值為copy,否則會鼠標指針為禁止樣式
link ,限定dropEffect的屬性值為link,否則會鼠標指針為禁止樣式
move ,限定dropEffect的屬性值為move,否則會鼠標指針為禁止樣式
copyLink ,限定dropEffect的屬性值為copy和link,否則會鼠標指針為禁止樣式
copyMove ,限定dropEffect的屬性值為copy和move,否則會鼠標指針為禁止樣式
linkMove ,限定dropEffect的屬性值為link和move,否則會鼠標指針為禁止樣式
all ,允許dropEffect的屬性值為任意值
none ,鼠標指針一直為禁止樣式,不管dropEffect的屬性值是什么
uninitialized ,沒有限定dropEffect屬性的值,效果和 all 一樣。
3.注意:僅能在 dragstart 事件中設置該屬性,其他事件中設置均無效。
dropEffect屬性
1.屬性作用:
用於設置目標元素將執行的操作,若屬性值屬於 effectAllowed 范圍內,則鼠標指針將顯示對應的指針樣式,否則則顯示禁止的指針樣式。
2.取值范圍:
copy :被拖拽元素將被復制到目標元素內,若屬於 effectAllowed 范圍內時,則鼠標指針顯示復制的樣式,否則則顯示禁止的指針樣式。
link :被拖拽元素將以超鏈接的形式打開資源,若屬於 effectAllowed 范圍內時,則鼠標指針顯示超鏈接的樣式,否則則顯示禁止的指針樣式。
move :被拖拽元素將被移動到目標元素內,若屬於 effectAllowed 范圍內時,則鼠標指針顯示移動的樣式,否則則顯示禁止的指針樣式。
none :被拖拽元素不能在目標元素上作任何操作,一直顯示禁止的指針樣式。除了文本框外其他元素的默認值均為none
3.注意:
1)僅能在 dragover 事件中設置該屬性值,其他事件中設置均無效
2)當顯示禁止的指針樣式時,將無法觸發目標元素的 drop 事件。
