Question

我有一个包含可放置元素a1的页面，以及可排序的特定元素a2。放入a1的文件将被读取并存入a2中的可排序列表中。上传和可排序脚本不包含在我的代码中，因为它们与问题无关。

问题是如果任何文件被删除到a1以外的任何位置，浏览器将尝试打开该文件以在浏览器中显示。图像文件非常明显..

我尝试使用以下代码禁用a1以外的所有代码，但这似乎仍然无效，我仍然无法获得不需要的重定向...

我已经在这里搜索了我的屁股，但似乎有很多关于添加拖放的内容，但在阻止方面却很少拖放...

有人可以通过以下代码告诉我我的错误吗？

<div id="a1"></div>
<div id="a2"></div>
<script>
drop = $("not(#a1)");
drop.droppable("option",{disabled:true, tolerance:"pointer"});
drop.droppable("disable");
drop.on("drop",function(e){
    e.preventDefault();
}
</script>

非常感谢提前！

Answer 1

我创建了一个简单的JsFiddle来使其工作。基本上，您可以使用文档本身的处理程序取消事件，而不必担心文件被删除的位置：

$("#a1").on('drop', function() {
    // your logic here
    alert('dropped on a1!');
});

$(document).on('drop dragover', function(e) {
    e.preventDefault();
});

如果您使用的是旧版jQuery，则可能需要将on函数替换为live。

Answer 2

您使用了错误的jQuery选择器。

试试这个

drop = $("div").not("#a1");

Answer 3

经过足够的修修补补后，我设法找到了更合适的解决方案......

看到我真正专注于防止文件被丢弃到可排序区域，我决定专注于确定被丢弃项目的性质......

drop = $(".all-slides");
drop.on('dragover', function(e){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
                                            drop.on('drop', function(e){
    e.preventDefault();
    dt = e.originalEvent.dataTransfer;
    if(dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file'))) {
        alert('You cannot upload images here. \nIf you wish to upload files, \nclick on the "Upload Images" button.');
    }
});

简单地说，drop事件监听数据传输的任何可能性，如果没有数据传输可能，我们知道它是一个DOM元素......否则我们知道它是一个文件，我们抛出警报......

防止除特定元素之外的所有内容

3 个答案: