首頁 > 開發者 > JavaScript
HTML5拖拽功能drag，html5拖拽drag
1.建立拖拽對象
給需要拖拽的元素設定draggable屬性，它有三個值：
true：元素可以被拖拽；
false：元素不能被拖拽；
auto： 瀏覽器自己判斷元素是否能被拖拽。
2.處理拖拽事件
當我們拖拽對象的時候會觸發拖拽事件包括：
A.dragstart：當元素拖拽開始觸發；
B.drag：在元素拖拽過程中觸發；
C.dragend：元素拖拽結束時觸發
3.建立投放區
①當拖拽對象進入投放區的時候會觸發相關的事件
A.dragenter：當拖拽對象進入投放區時觸發； B.dragover：拖拽對象在投放區內移動時觸發； C.dragleave：拖拽對象沒有投放到投放區，離開投放區的 時候觸發；
D.drop：拖拽對象投放在投放區時觸發。
②注意：dragenter、dragover可能會受到預設事件的影 響，所以我們在這兩個事件當中使用 e.preventDefault();來阻止事件預設事件
4.使用dataTransfer傳遞資料
當我們需要拖拽對象向投放區傳遞資料的時候用到 dataTransfer有下面的屬性和方法：
1.types：返回資料的格式； 2.getData(<format>)：返回指定格式資料； 3.setData(<format>, <data>)：設定指定格式資料；
4.clearData(<format>)：移除指定格式資料； 5.files：返回已經投放的檔案的資訊數組。 1.type：檔案類型
2.size:檔案大小
3.name:檔案名稱
編程執行個體：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
margin:30px;
float: left;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)">
<img src="css/imgs/s3.jpg" id="img1" draggable="true" ondragstart="drag(event)" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">
</div>
</body>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e){
var data= e.dataTransfer.getData("Text")
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
function allowDrag(e){
e.preventDefault();
}
</script>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
