javascript - 如何防止人们掉落在不可掉落元素中？

Question

我正在以这种方式实现拖放。

<?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);
  }

有时我的用户不会将东西放入 #droparea 中。

我想阻止他们这样做。

我应该做什么？

Answer 1

您需要为文档添加 noop dragover 和 drop 处理程序。这将防止默认浏览器行为用删除的文件替换当前页面。

See here for a demo

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

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