<title>Document</title>
<style>
#item{
width:100px;
height: 100px;
background:red;
}
#wrapper{
height: 300px;
width: 300px;
border: 2px solid #000;
margin-top: 20px;
</style>
</head>
<body>
<div draggable="true">被拖拽元素</div>
<div>目標元素</div>
<script>
var item = document.getElementById("item")
var wrapper = document.getElementById("wrapper");
/**
* 拖拽開始是觸發的事件；
*/
item.addEventListener("dragstart",function(){
console.log("dragstart");
})
* 拖拽結束時觸發的事件
item.addEventListener("dragend",function(){
console.log("dragend");
* 被拖拽元素進入目標元素時觸發
wrapper.addEventListener("dragenter",function(){
console.log("enter");
* 被拖拽元素在目標元素上時觸發
wrapper.addEventListener("dragover",function(e){
e.preventDefault();
console.log("over");
* 滑鼠在目標元素上鬆開時觸發
觸發條件：必須在阻止dragover的預設事件
wrapper.addEventListener("drop",function(){
console.log("drop");
<title>Document</title>
<style>
#item{
width:100px;
height: 100px;
background:red;
}
#wrapper{
height: 300px;
width: 300px;
border: 2px solid #000;
margin-top: 20px;
}
</style>
</head>
<body>
<div draggable="true">被拖拽元素</div>
<div>目標元素</div>
<script>
var item = document.getElementById("item")
var wrapper = document.getElementById("wrapper");
/**
* 拖拽開始是觸發的事件；
*/
item.addEventListener("dragstart",function(){
console.log("dragstart");
})
/**
* 拖拽結束時觸發的事件
*/
item.addEventListener("dragend",function(){
console.log("dragend");
})
/**
* 被拖拽元素進入目標元素時觸發
*/
wrapper.addEventListener("dragenter",function(){
console.log("enter");
})
/**
* 被拖拽元素在目標元素上時觸發
*/
wrapper.addEventListener("dragover",function(e){
e.preventDefault();
console.log("over");
})
/**
* 滑鼠在目標元素上鬆開時觸發
觸發條件：必須在阻止dragover的預設事件
*/
wrapper.addEventListener("drop",function(){
console.log("drop");
})