溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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">
（2）元素拖動時發生的情況（拖）
dataTransfer：保存拖動的數據
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)">
<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中實現圖片拖放的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
