如何改變拖動時滑鼠懸浮樣式

2022-08-11 13:03:11 字數 1411 閱讀 3124

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 事件。

如何改變滑鼠樣式

如何改變滑鼠樣式 如何實現滑鼠的不同樣式?方法是 在塗鴉板中寫入 其中tag是標籤名,mouse style就是滑鼠樣式,如hand crosshair text wait等等。下面是各樣式的大致含義。下面是各樣式的大致含義。hand 是大家所熟悉的手型。crosshair 是十字型。text 是平...

改變滑鼠樣式 cursor

所有主流瀏覽器都支援 cursor 屬性。注釋 opera 9.3 和 safari 3 不支援 url 值。注釋 任何版本的 internet explorer 包括 ie8 都不支援屬性值 inherit cursor auto url 需使用的自定義游標的 url。注釋 請在此列表的末端始終定...

cursor改變滑鼠樣式

cursor 定義滑鼠樣式 取值 auto crosshair default pointer move e resize ne resize nw resize n resize se resize sw resize s resize w resize text wait help progre...