Javascript 如何防止人们在不可跌落的元件中跌落？

我以这种方式实现拖放

<?php echo $this->Html->script('modernizr/2.5.3/modernizr.min.js', array('block' => 'scriptTop')); ?>


$(document).ready(function () {
    dropArea = document.getElementById("droparea");

    dropArea.addEventListener("dragleave", function (evt) {
        var target = evt.target;

        if (target && target === dropArea) {
            this.className = "";
        }

        dropArea.className = "";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);

    dropArea.addEventListener("dragenter", function (evt) {
        this.className = "over";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);

    dropArea.addEventListener("dragover", function (evt) {

        evt.preventDefault();
        evt.stopPropagation();

    }, false);
    // this is the initial add-drop
    dropArea.addEventListener("drop", function (evt) {
        doStuff();
        this.className = "";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);
  }

$（文档）.ready（函数（）{
dropArea=document.getElementById（“dropArea”）；
dropArea.addEventListener（“dragleave”，函数（evt）{
var目标=evt.target；
if（target&&target==dropArea）{
this.className=“”；
}
dropArea.className=“”；
evt.preventDefault（）；
evt.stopPropagation（）；
}，假）；
dropArea.addEventListener（“dragenter”，函数（evt）{
this.className=“结束”；
evt.preventDefault（）；
evt.stopPropagation（）；
}，假）；
dropArea.addEventListener（“dragover”，函数（evt）{
evt.preventDefault（）；
evt.stopPropagation（）；
}，假）；
//这是最初的添加-删除
dropArea.addEventListener（“drop”，函数（evt）{
doStuff（）；
this.className=“”；
evt.preventDefault（）；
evt.stopPropagation（）；
}，假）；
}

有时，我的用户会将未放入

#droparea

的内容丢弃

我想阻止他们那样做

---

我该怎么办？

您需要限制放置区域，以便只能将其放置到所需的位置

将drop事件处理程序更新为：

dropArea.addEventListener("drop",function(evt){
//default cancel
    evt.preventDefault();
    evt.stopPropagation();
},true);

注意：参数“true”已应用

有关更多详细信息，请参阅

---

您可以参考demo

您需要为文档添加noop

dragover

和

drop

处理程序。这将防止默认浏览器行为将当前页面替换为已删除的文件

---

我正在将一个图像放入droparea。我认为演示与我的用例不同，但它限制了其他区域的删除。我找不到指示限制删除的实际代码。可以启发吗？在每个div中，处理程序ondragover=“event.preventDefault（）；”防止在其上拖动。在图像处理程序中，这与html文档的其余部分一样。在我的情况下，我有一个名为droparea的div，允许用户将图像拖放到其中。但是，他们有时会不小心将图像拖放到droparea之外，并会感到困惑。这就是我要介绍的正如你从我的问题中所看到的，我问“我的用户有时会把不属于#droparea的东西扔到#droparea。我想阻止他们这样做。”

// Handle dropping on non-droparea    
document.addEventListener("drop", cancelEvent, false);
document.addEventListener("dragover", cancelEvent, false);

function cancelEvent(evt) {
    evt.preventDefault();
    evt.stopPropagation();
}