溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

HTML5中實(shí)現(xiàn)圖片拖放的方法

發(fā)布時(shí)間：2020-08-29 11:51:54 來(lái)源：億速云 閱讀：313 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹HTML5中實(shí)現(xiàn)圖片拖放的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

拖(drag)放(drop)在頁(yè)面中是一種常見(jiàn)的HTML5特效，它所表示的就是抓取對(duì)象以后再拖放到另一個(gè)位置。在 HTML5 中，任何元素都能可以進(jìn)行拖放，所以接下來(lái)在文章中將通過(guò)實(shí)例詳細(xì)告訴大家如何實(shí)現(xiàn)拖動(dòng)效果。

拖放效果所需的知識(shí)點(diǎn)

draggable

規(guī)定元素是否可拖動(dòng)，一般情況下鏈接和圖片默認(rèn)是可拖動(dòng)的。

true：規(guī)定元素是可拖動(dòng)的。

false： 規(guī)定元素是不可拖動(dòng)的。

auto：使用瀏覽器的默認(rèn)特性。

拖放元素時(shí)觸發(fā)的事件

ondragstart ：拖動(dòng)元素開(kāi)始時(shí)所觸發(fā)的事件

ondrag：元素正在拖動(dòng)時(shí)觸發(fā)的事件

ondragend：用戶(hù)完成元素拖動(dòng)后觸發(fā)的事件

釋放目標(biāo)時(shí)觸發(fā)的事件

ondragenter：被拖動(dòng)元素進(jìn)入拖動(dòng)范圍時(shí)觸發(fā)事件

ondragover ：表示在什么放置被拖動(dòng)的數(shù)據(jù)所觸發(fā)的事件。

ondragleave：被拖動(dòng)元素離開(kāi)拖動(dòng)范圍時(shí)觸發(fā)的事件

ondrop： 鼠標(biāo)離開(kāi)拖放元素時(shí)

案例分享：將圖片放置到box盒子中

（1）設(shè)置元素為可拖放的

<img id="drag1" src=images/1.jpg" draggable="true">

（2）元素拖動(dòng)時(shí)發(fā)生的情況（拖）

dataTransfer：保存拖動(dòng)的數(shù)據(jù)

text為數(shù)據(jù)類(lèi)型，event.target.id為數(shù)據(jù)，將數(shù)據(jù)賦值給dataTransfer保存。

function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}

（3）  將元素拖動(dòng)到指定位置（放）

默認(rèn)情況下無(wú)法將元素拖動(dòng)放到另一個(gè)位置，因此需要取消默認(rèn)事件，需要用到preventDefault()方法

其中 setData()方法指被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值

appendChild() 方法從一個(gè)元素向另一個(gè)元素中移動(dòng)元素。

function drop(event)
{
event.preventDefault();//取消瀏覽器的默認(rèn)行為
var data=event.dataTransfer.getData("Text");//獲取指定格式的數(shù)據(jù)
event.target.appendChild(document.getElementById(data));
}

完整代碼

<body>
	<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<img src="images/1.jpg" id="drag1" draggable="true" ondragstart="drag(event)">
<script>
	function allowDrop(event)
        {
          event.preventDefault();//取消事件默認(rèn)行為
            }
		//拖
		function drag(event){
		 event.dataTransfer.setData("Text",event.target.id)
		}
		//放
          function drop(event){
	event.preventDefault();
	var data=event.dataTransfer.getData("text");
	event.target.appendChild(document.getElementById(data))
}
</script>
</body>

效果圖

HTML5中實(shí)現(xiàn)圖片拖放的方法

以上是HTML5中實(shí)現(xiàn)圖片拖放的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手