the code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>drag</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
-sharpdraggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="dropzone ">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData("text/plain",null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script>
var dragged
document.addEventListener("drag", function (event) {
}, false)
document.addEventListener("dragstart", function (event) {
dragged = event.target
event.target.style.opacity = .5
}, false)
document.addEventListener("dragend", function (event) {
event.target.style.opacity = ""
}, false)
document.addEventListener("dragover", function (event) {
event.preventDefault()
}, false)
document.addEventListener("dragenter", function (event) {
if (event.target.className == "dropzone") {
event.target.style.background = "purple"
}
}, false)
document.addEventListener("dragleave", function (event) {
if (event.target.className == "dropzone") {
event.target.style.background = ""
}
}, false)
document.addEventListener("drop", function (event) {
event.preventDefault()
if (event.target.className == "dropzone") {
event.target.style.background = ""
dragged.parentNode.removeChild(dragged)
event.target.appendChild(dragged)
}
}, false)
</script>
</body>
</html>what you want to achieve is the ability to drag the text "this is draggable" in different div containers. The function can be realized, and the effect is shown in the figure
div , draggable = "false"
div
there is no error message in the console. After testing, as long as the js code is commented out, nothing can be dragged.
what is the cause of this?