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

專業(yè)從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計,重慶小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團隊竭力真誠服務(wù)，采用html5+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組，與您實時在線互動，隨時提供解決方案，暢聊想法和感受。

    拖動什么-ondragstart和setData()

    然后，規(guī)定當元素被拖動時，會發(fā)生什么。

    在上面的例子中，ondragstart屬性調(diào)用了一個函數(shù)，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)。

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

  function drag(ev)

{

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

}

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

    放到何處-ondragover

    ondragover事件規(guī)定在何處放置被拖動的數(shù)據(jù)。

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

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

    event.preventDefault()

    進行放置-ondrop

    當放置被拖數(shù)據(jù)時，會發(fā)生drop事件。

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

 function drop(ev)

{

    ev.preventDefault();

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

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

}

    代碼解釋：

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

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

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

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

以上是“css如何設(shè)置元素為可拖放”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！