【JavaScript】拖動事件,鼠標拖動元素出現默認樣式原因及解決方法,進度條拖動樣式,拖動對象dataTransfer對象


在製作進度條的時候,想要製作一個進度條的拖動樣式,所以我給他註冊了拖動事件drag,然後雖然可以拖拽產生相應的變化但是會出現一個禁止的標誌
解決這個問題先要分析一些拖拽事件:

拖動事件

這裏說一下拖動事件:

什麼是拖放?拖放是一種常見的特性,即抓取對象以後拖到另一個位置。

爲了讓元素可拖動,需要使用 HTML5 draggable 屬性(設置爲draggable=true)。(鏈接和圖片默認是可拖動的,不需要 draggable 屬性。)

在拖動目標上觸發事件 (源元素):

  1. dragstart
    要被拖拽的元素開始拖拽時觸發,這個事件對象是被拖拽元素
  2. drag - 元素正在拖動時觸發
  3. dragend - 用戶完成元素拖動後觸發
    在drop之後觸發,就是拖拽完畢時觸發,這個事件對象是被拖拽元素
    釋放目標時觸發的事件:
  4. dragenter
    拖拽元素進入目標元素時觸發,這個事件對象是目標元素
  5. dragover
    拖拽某元素在目標元素上移動時觸發,這個事件對象是目標元素
  6. dragleave
    拖拽某元素離開目標元素時觸發,這個事件對象是目標元素
  7. drop
    ondrop 事件在可拖動元素或選取的文本放置在目標區域時觸發。
    觸發順序:
    dragstart –> dragenter –> dragover –> drop –> dragend

使用拖拽事件後就可以對元素註冊該事件,然後完成相應的工作,而產生的禁止標誌實際上和拖動事件對象有關:

拖動事件對象

dataTransfer對象

dataTransfer對象是事件對象的一個屬性,用於從被拖拽元素相放置目標傳遞字符串格式的數據。

因爲它是事件對象的屬性,所以只能在拖放事件的事件處理程序中訪問dataTransfer對象。在事件處理程序中,可以使用這個對象的屬性和方法來完善拖放功能。

dataTransfer對象的屬性:

  1. dropEffect(重點)
    拖放的操作類型,決定了瀏覽器如何顯示鼠標形狀,可能的值爲copy、move、link和none。
    1.屬性作用: 用於設置目標元素將執行的操作,若屬性值屬於 effectAllowed 範圍內,則鼠標指針將顯示對應的指針樣式,否則則顯示禁止的指針樣式。
    2.取值範圍
    copy :被拖拽元素將被複制到目標元素內,若屬於 effectAllowed 範圍內時,則鼠標指針顯示覆制的樣式,否則則顯示禁止的指針樣式。
    link :被拖拽元素將以超鏈接的形式打開資源,若屬於 effectAllowed 範圍內時,則鼠標指針顯示超鏈接的樣式,否則則顯示禁止的指針樣式。
    move :被拖拽元素將被移動到目標元素內,若屬於 effectAllowed 範圍內時,則鼠標指針顯示移動的樣式,否則則顯示禁止的指針樣式。
    none :被拖拽元素不能在目標元素上作任何操作,一直顯示禁止的指針樣式。除了文本框外其他元素的默認值均爲none
    3.注意
    1)僅能在 dragover 事件中設置該屬性值,其他事件中設置均無效
    2)當顯示禁止的指針樣式時,將無法觸發目標元素的 drop 事件。 通過將effectAllowed 和 dropEffect兩個屬性進行匹配我們就可以很簡單的根據拖拽行爲即將要發生的事情,來設置對應的鼠標樣式了。
  2. effectAllowed(重點)
    指定所允許的操作,可能的值爲copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized(默認值,等同於all,即允許一切操作)。
    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 事件中設置該屬性,其他事件中設置均無效。
  3. files:包含一個FileList對象,表示拖放所涉及的文件,主要用於處理從文件系統拖入瀏覽器的文件。
  4. types:儲存在DataTransfer對象的數據的類型。

dataTransfer對象的方法:

  1. setData(format, data):在dataTransfer對象上儲存數據。第一個參數format用來指定儲存的數據類型,比如text、url、text/html等。
  2. getData(format):從dataTransfer對象取出數據。
  3. clearData(format):清除dataTransfer對象所儲存的數據。如果指定了format參數,則只清除該格式的數據,否則清除所有數據。
  4. setDragImage(imgElement, x, y):指定拖動過程中顯示的圖像。默認情況下,許多瀏覽器顯示一個被拖動元素的半透明版本。
  5. imgElement必須是一個圖像元素,而不是指向圖像的路徑,參數x和y表示圖像相對於鼠標的位置。

拖動元素div或img時出現禁止圖標。

原因解析

在拖放的過程中遇到當一個div上有其他元素,例如P、label、img等,在拖動到P、label時會出現禁止拖動的圖標

被拖動元素,比如說img元素,目標元素,拖動時鼠標經過的元素,比如說一個有高度和寬度的div元素。當被拖動元素img拖動中經過目標元素div時,如果目標元素div不能接收被拖動元素的drop時,就會出現禁止標記。

解決方案

拖動到的“目的地”並不接受拖動的元素-----這是因爲當拖動元素經過document時,document對象默認阻止了拖動事件,而其他HTML組件也位於document對象內,因此它們也不能接受“放”。

  1. 因此我們需要將目標元素加兩個事件ondragenter ondragover事件內容爲event.preventDefault()禁止瀏覽器的默認行爲
    在目標元素加事件,類似這樣:
    ,在dragenter(evt) {evt.preventDefault()),就能消除禁止標記的出現。
  2. 使用dataTransfer對象對象的dropEffect屬性可以更換產生的拖拽時鼠標樣式

進度條拖動樣式

使用拖拽事件註冊的拖拽進度條會產生拖拽對象的鼠標樣式,而拖動進度條並不希望產生該樣式,拖拽時的鼠標樣式也沒有默認的小白

使用鼠標點擊事件 鼠標移動事件 鼠標擡起事件 替代拖拽事件

鼠標點擊事件註冊在點擊觸發拖動的元素身上,鼠標移動事件和鼠標擡起事件放置到document身上

loading.onmousedown = function(e) {
        document.onmousemove = function(e) {
            video.removeEventListener('timeupdate', musicPlay);//消除進度條播放事件
           	//這裏就可以對進度條進行操作
            }

        }
		
        document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmouseup = null;
        }

    }

這樣還不行,當在拖動進度條時,可能會誤觸他的父元素,然後將其拖走然後無法觸發mouseup事件,所以需要禁止選擇這些可能會誤觸的元素

CSS的user-select屬性

CSS 屬性 user-select 控制用戶能否選中文本。除了文本框內,它對被載入爲 chrome 的內容沒有影響。
語法:
none
元素及其子元素的文本不可選中。 請注意這個Selection 對象可以包含這些元素。 從Firefox 21開始, none 表現的像 -moz-none,因 此可以使用 -moz-user-select: text 在子元素上重新啓用選擇。
text
用戶可以選擇文本。
all
在一個HTML編輯器中,當雙擊子元素或者上下文時,那麼包含該子元素的最頂層元素也會被選中。
contain
允許在元素內選擇;但是,選區將被限制在該元素的邊界之內。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章