HTML拖放API實(shí)例分享
介紹
HTML拖放API依賴于文檔對(duì)象模型來獲取有關(guān)所拖放內(nèi)容的信息。結(jié)果，它允許我們拖放網(wǎng)頁上的任何元素，并且?guī)缀跛兄髁鳛g覽器都支持它。使用JavaScript事件處理程序，我們可以將任何元素變成可拖動(dòng)的項(xiàng)目或可以放置元素的項(xiàng)目。
在本文中，我們將學(xué)習(xí)如何使用HTML拖放API。讓我們開始吧。
在我們開始解釋該API之前，我們先來看一下這個(gè)案例，截圖如下：
如果你想看完整代碼的話，可以到Codepen上看，
代碼地址：https://codepen.io/MehdiAoussiad/pen/bGwOwyb
這個(gè)案例是通過使用HTML拖放API來完成的?？雌饋硭坪鹾軓?fù)雜，現(xiàn)在，我們開始研究制作此示例的所有部分。
讓我們開始吧。
讓我們從HTML開始。
在HTML結(jié)構(gòu)中，我們將創(chuàng)建三個(gè)div：一個(gè)可拖動(dòng)div和兩個(gè)div，我們將在其中拖放可拖動(dòng)的div。
可拖動(dòng)的div必須將draggable屬性設(shè)置為true。然后，我們將添加一些HTML拖放事件屬性，以便在JavaScript中進(jìn)行處理。
這是HTML示例代碼：
<body><p>Drag and Drop the violet rectangle in other rectangles.</p><div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><div id="div" draggable="true" ondragstart="drag(event)"></div><br><div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body>
接著，我們繼續(xù)設(shè)置CSS。
因此，現(xiàn)在，我們將使用CSS設(shè)置元素樣式。你可以閱讀下面的代碼以查看我們的樣式表。
CSS代碼如下：
*{margin: 0;padding: 0;box-sizing: border-box;font-family: sans-serif;}body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100Vh;}p{margin: 10px;}#dropHere{width: 300px;height: 80px;border: 1px solid black;display: flex;align-items: center;justify-content: center;}#div{background: blueviolet;width: 280px;height: 70px;cursor: grabbing;cursor: -webkit-grabbing;cursor: -moz-grabbing;}
最終輸出效果：
最后，是JavaScript部分。
使用JavaScript，我們將通過創(chuàng)建函數(shù)來處理在HTML中添加的拖放事件屬性。
這是JavaScript代碼：
function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}
之后，你將能夠在其他兩個(gè)矩形div之間拖放紫色div。現(xiàn)在讓我詳細(xì)解釋所有這些：
1、在HTML中，我們必須為violet div指定一個(gè)draggable屬性設(shè)置true，以使其成為可拖動(dòng)元素。
2、ondragstartdraggable元素中的屬性調(diào)用一個(gè)函數(shù)drag（event），該函數(shù)指定要拖動(dòng)的數(shù)據(jù)。該dataTransfer.setData()方法設(shè)置數(shù)據(jù)類型和拖動(dòng)數(shù)據(jù)的值。
function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}
3、對(duì)于其他兩個(gè)放置紫色矩形的div，事件ondragover 指定可以在何處放置拖動(dòng)的數(shù)據(jù)。因?yàn)槟J(rèn)情況下，不能將元素拖放到其他元素中。為了允許刪除，我們event.preventDefault()在函數(shù)中調(diào)用方法allowDrop。
4、現(xiàn)在我們只需要?jiǎng)h除即可。當(dāng)拖放的數(shù)據(jù)被放置時(shí)，發(fā)生放置事件。這是通過ondrop調(diào)用函數(shù)drop（event）的屬性完成的：
function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}
結(jié)論
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方web前端開發(fā)
