html 移动事件,关于 html5 拖动事件出现的问题

在学习使用拖动事件的时候,发现不管设置 draggable 为 true 还是 false,元素都可以被拖动.

代码如下

drag

#draggable {

width: 200px;

height: 20px;

text-align: center;

background: white;

}

.dropzone {

width: 200px;

height: 20px;

background: blueviolet;

margin-bottom: 10px;

padding: 10px;

}

This div is draggable

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)

想要实现的功能是能够将文字 "这是可以拖动的" 在不同的 div 容器中进行拖动.功能是可以实现,效果如图所示

但问题是不知道为什么 div 容器也可以被拖动,就算设置了 draggable = 'false' 也不能够解决

div class="dropzone " draggable="false">

这是可以拖动的