溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
拖放（drag和drop）是html5標準組成，下面我們從五個方面對其進行敘述，分別是如何成為拖動物體，如何成為拖動目標，拖動物體上擁有的事件，拖動目標上擁有的事件以及拖放物體間如何傳遞信息。
拖動物體上擁有的事件
拖動目標上擁有的事件
如何成為拖動物體
在html中img元素默認可以進行拖拽，其它元素需要設置draggable=true，即可對其進行拖拽。
<div draggable="true"></div>
如何成為拖動目標
html中，元素默認不能成為放置目標，只有我們禁止了drapenter和drapover事件的默認行為時，可以稱為拖放目標。
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
拖放物體間如何傳遞信息
事件中具有一個dataTransfer對象，它擁有的兩個常用方法setData()和getData()，分別用于在存放拖拽信息以及獲取拖拽信息。其中，setData()只能在拖拽事件剛開始時設置，即dragstart事件時設置，getData()則一般在放置獲取，即drop事件觸發時獲取。
// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 拖拽</title>
</head>
<body>
<div draggable="true"></div>
<div id="dragobj" draggable="true">
<img src="c_06.jpg" alt="">
</div>
<div id="droptarget" ></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');
// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
</script>
</html>
存在問題
火狐瀏覽器中拖拽圖片默認打開新窗口，根據javascript高級程序設計中在drop事件中禁止默認事件，未解決問題。
解決方法：將圖片作為div的背景圖片，將div作為拖拽物體，則不存在此問題。
最終代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 拖拽</title>
<style>
div {
width: 120px;
height: 136px;
}
#dragobj {
background: url('c_06.jpg') no-repeat;
}
#droptarget {
background-color: #eee;
}
</style>
</head>
<body>
<div id="dragobj" draggable="true">
</div>
<div id="droptarget"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');
// drapobj 拖拽元素
// droptarget 放置目標
dragobj.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
var id = event.dataTransfer.getData('id');
var obj = document.getElementById(id);
event.preventDefault();
this.appendChild(obj);
});
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
