溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用html5實現簡單的拖動功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體方法如下：
1、對象元素的draggable屬性設置為true(draggable="true")。還需要注意的是a元素和img元素必須指定href；
2、編寫拖拽有關的事件處理代碼：
3、案例實現代碼：
（1）HTML代碼段：
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br /> <img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>
（2）CSS代碼段：
#tuo{
width: 540px;
height: 320px;
background: #e54d26;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #d2d2d2;
box-shadow: 1px 4px 8px #646464;
}
img{
width: 500px;
height: 280px;
}（3）JavaScript代碼段：
function allowDrop(ev){
//不執行默認處理（拒絕被拖放）
ev.preventDefault();
};
function drag(ev){
//使用setData(數據類型，攜帶的數據)
//方法將要拖放的數據存入dataTransfer對象
ev.dataTransfer.setData("Text",ev.target.id);
};
function drop(ev){
//不執行默認處理（拒絕被拖放）
ev.preventDefault();
//使用getData()獲取到數據，然后賦值給data
var data = ev.dataTransfer.getData("Text");
//使用appendChild方法把拖動的節點放到元素節點中成為其子節點
ev.target.appendChild(document.getElementById(data));
};4、實現的效果如下：
（1）未拖放之前：
（2）拖放之后
以上是“如何使用html5實現簡單的拖動功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
