我正在试验
HTML5文件API.但是我注意到,如果将图像拖动到浏览器中,浏览器会有一个默认行为,即显示图像.但是,如果您的目标是上传图像而不是查看图像,这可能会很烦人.
我想知道是否有办法防止这种行为？我已尝试对ondrop事件进行stopPropagation / preventDefault,但有一点工作,但是留下“drop”光标,给人的印象是图像可以放在页面的任何地方.
理想情况下,您只能在要删除图像的指定区域看到“拖放”光标.
解决方法
dataTransfer对象具有dropEffect和effectAllowed属性.不完全确定它们之间的区别,但将两者都设置为“无”应该有所帮助.
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});
请参阅http://jsfiddle.net/andreymir/H3RR7/embedded/result/ – 仅允许拖放到矩形.
