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

Answer 2

您需要限制丢弃区域，以便可以将其删除到只需要的区域。

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

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

注意：参数“true”已应用。

有关详细信息，请参阅link。

您可以参考演示here

如何防止人们掉入不可褪色的元素？

2 个答案: