css如何設置元素為可拖放

小編給大家分享一下css如何設置元素為可拖放，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

    拖動什么-ondragstart和setData()

    然后，規定當元素被拖動時，會發生什么。

    在上面的例子中，ondragstart屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

    dataTransfer.setData()方法設置被拖數據的數據類型和值：

  function drag(ev)

{

    ev.dataTransfer.setData("Text",ev.target.id);

}

    Text是一個DOMString表示要添加到dragobject的拖動數據的類型。值是可拖動元素的id("drag1")。

    放到何處-ondragover

    ondragover事件規定在何處放置被拖動的數據。

    默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。

    這要通過調用ondragover事件的event.preventDefault()方法：

    event.preventDefault()

    進行放置-ondrop

    當放置被拖數據時，會發生drop事件。

    在上面的例子中，ondrop屬性調用了一個函數，drop(event)：

 function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

    代碼解釋：

    調用preventDefault()來避免瀏覽器對數據的默認處理（drop事件的默認行為是以鏈接形式打開）

    通過dataTransfer.getData("Text")方法獲得被拖的數據。該方法將返回在setData()方法中設置為相同類型的任何數據。

    被拖數據是被拖元素的id("drag1")

    把被拖元素追加到放置元素（目標元素）中

以上是“css如何設置元素為可拖放”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！