HTML5中如何實作圖片的拖放-H5教程-PHP中文網

HTML5中如何實作圖片的拖放

清浅

發布： 2018-11-28 09:36:55

原創

6375 人瀏覽過

今天將和大家分享有關HTML5中拖放元素的用法，具有一定的參考價值，希望對大家有幫助。

【推薦課程：#HTML5教學】

拖曳(drag)放(drop)在頁面中是一種常見的HTML5特效，它所表示的就是抓取物件以後再拖放到另一個位置。在 HTML5 中，任何元素都能可以進行拖放，所以接下來在文章中將透過實例詳細告訴大家如何實現拖曳效果。

拖放效果所需的知識點

#draggable

規定元素是否可拖動，一般情況下連結和圖片預設是可拖曳的。

true：規定元素是可拖曳的。

false：規定元素是不可拖曳的。

auto：使用瀏覽器的預設功能。

拖曳元素時觸發的事件

ondragstart ：拖曳元素開始時所觸發的事件

ondrag：元素正在拖曳時觸發的事件

ondragend：使用者完成元素拖曳後觸發的事件

#釋放目標時觸發的事件

ondragenter：被拖曳元素進入拖曳範圍時觸發事件

ondragover ：表示在什麼放置被拖曳的資料所觸發的事件。

ondragleave：被拖曳元素離開拖曳範圍時觸發的事件

ondrop：滑鼠離開拖曳元素時

案例分享

#：將圖片放置到box盒子中

（1）設定元素為可拖曳的

<img  id="drag1" src=images/1.jpg" draggable="true" alt="HTML5中如何實作圖片的拖放" >

登入後複製

（2）元素拖曳時發生的情況（拖曳）

dataTransfer：保存拖曳的資料

HTML5中如何實作圖片的拖放

text為資料類型，event.target.id為數據，將資料賦值給dataTransfer保存。

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

登入後複製

（3）將元素拖曳到指定位置（放）

預設無法將元素拖曳放到另一個位置，因此需要取消默認事件，需要用到preventDefault()方法

###其中 setData()方法指被拖曳資料的資料型別和值###### appendChild() 方法從一個元素往另一個元素移動元素到另一個元素。 ###

function drop(event)
{
event.preventDefault();//取消浏览器的默认行为
var data=event.dataTransfer.getData("Text");//获取指定格式的数据
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)" alt="HTML5中如何實作圖片的拖放" >
<script>
	function allowDrop(event)
        {
          event.preventDefault();//取消事件默认行为
            }
		//拖
		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中如何實作圖片的拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！