H5拖拽api使用
效果示範：
實現步驟
拖拽元素設置：
（1）設置屬性draggable爲true使元素可拖拽
<div id="inner" draggable="true" ondragstart="drag(event)"></div>
（2）綁定dragstart事件，將拖拽元素id存入dataTransfer，用於放置元素時取出對應dom
/* 拖起inner觸發 */
function drag(e) {
/* 將被托起的元素id存到dataTranfer裏面 */
e.dataTransfer.setData('id', e.target.id);
}
放置容器設置
<div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
（1）綁定dragover事件，阻止元素默認事件，使drop事件可以觸發
/* 取消box的默認設置,否則drop沒反應 */
function allowDrop(e) {
e.preventDefault();
}
（2）綁定drop事件，放置時觸發，利用dataTransfer取出拖拽元素的id，將拖拽元素dom對象放置到當前容器。
/* 放置元素 */
function drop(e) {
/* 獲取拖拽元素id,放置到當前元素內部 */
let id = e.dataTransfer.getData('id');
e.target.appendChild(document.getElementById(id))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drag與drop</title>
<style>
.box {
float: left;
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid olivedrab;
display: flex;
justify-content: center;
align-items: center;
}
#inner {
width: 180px;
height: 80px;
background-color: mediumpurple;
}
</style>
</head>
<body ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="box" ondragover="allowDrop(event)" ondrop="drop(event)">
<div id="inner" draggable="true" ondragstart="drag(event)"></div>
</div>
<div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
/* 拖起inner觸發 */
function drag(e) {
/* 將被托起的元素id存到dataTranfer裏面 */
e.dataTransfer.setData('id', e.target.id);
}
/* 取消box的默認設置,否則drop沒反應 */
function allowDrop(e) {
e.preventDefault();
}
/* 放置元素 */
function drop(e) {
/* 獲取拖拽元素id,放置到當前元素內部 */
let id = e.dataTransfer.getData('id');
e.target.appendChild(document.getElementById(id))
}
</script>
</body>
</html>