這篇文章主要講解了“Html5怎么實現在兩個div元素之間拖放圖像”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“Html5怎么實現在兩個div元素之間拖放圖像”吧!
創新互聯網站建設由有經驗的網站設計師、開發人員和項目經理組成的專業建站團隊,負責網站視覺設計、用戶體驗優化、交互設計和前端開發等方面的工作,以確保網站外觀精美、網站設計制作、成都網站制作易于使用并且具有良好的響應性。原本效果
拖拽之后效果
代碼如下
代碼如下:
[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/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));
}
</script>
</head>
<body>
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
[/code]
它看上去也許有些復雜,不過我們可以分別研究拖放事件的不同部分。
設置元素為可拖放
首先,為了使元素可拖動,把 draggable 屬性設置為 true :
代碼如下:
<img draggable="true" />
拖動什么 - ondragstart 和 setData()
然后,規定當元素被拖動時,會發生什么。
在上面的例子中,ondragstart 屬性調用了一個函數,drag(event),它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值:
代碼如下:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中,數據類型是 "Text",值是可拖動元素的 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")把被拖元素追加到放置元素(目標元素)中
感謝各位的閱讀,以上就是“Html5怎么實現在兩個div元素之間拖放圖像”的內容了,經過本文的學習后,相信大家對Html5怎么實現在兩個div元素之間拖放圖像這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創新互聯網站建設公司,,小編將為大家推送更多相關知識點的文章,歡迎關注!
當前文章:Html5怎么實現在兩個div元素之間拖放圖像-創新互聯
轉載來源:http://m.newbst.com/article12/ioggc.html
成都網站建設公司_創新互聯,為您提供品牌網站設計、定制網站、微信公眾號、網站設計、網站維護、小程序開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯