JS中dataTransfer對象在拖曳操作中的妙用。

來源:互聯網
上載者:User

標籤:刪除對象   drag   copy   過程   傳輸資料   bsp   允許   方法   list   

dataTransfer對象提供了對於預定義的剪貼簿格式的訪問,以便在拖曳操作中使用。

通俗的講就是在拖曳操作的過程中,我們可以用過dataTransfer對象來傳輸資料,以便在拖曳操作結束的時候對資料進行其他的操作。

對象屬性

 

  • dropEffect:設定或返回拖放目標上允許發生的拖允許存取為。如果此處設定的拖允許存取為不再effectAllowed屬性設定的多種拖允許存取為之內,拖放操作將會失敗。該屬性值只允許為“null”、“copy”、“link”和“move”四值之一。
  • effectAllowed:設定或返回被拖動元素允許發生的拖動行為。該屬性值可設為“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
  • items:該屬性返回DataTransferItems對象,該對象代表了拖動資料。
  • types:該屬性返回一個DOMStringList對象,該對象包括了存入dataTransfer中資料的所有類型。

 

對象方法

 

  • setData(format,data):將指定格式的資料賦值給dataTransfer對象,參數format定義資料的格式也就是資料的類型,data為待賦值的資料
  • getData(format):從dataTransfer對象中擷取指定格式的資料,format代表資料格式,data為資料。
  • clearData([format]):從dataTransfer對象中刪除指定格式的資料,參數可選,若不給出,則為刪除對象中所有的資料。
  • addElement(element):添加自訂表徵圖
  • setDragImage(element,x,y):設定拖放操作的自訂表徵圖。其中element設定自訂表徵圖,x設定表徵圖與滑鼠在水平方向上的距離,y設定表徵圖與滑鼠在垂直方向上的距離。

JS中dataTransfer對象在拖曳操作中的妙用。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.