拖放问题firefox
Drag and drop issue firefox
当我点击div中的图像并尝试拖动时只拖动图像而不是整个div,当我将其放入新div
中时会产生内存不足异常html: <div class="box" draggable="true">
<img src="drag icon.png" width="16" height="16"/>
<header>B</header>
<p>
Put me
</p>
</div>
<div class="box" draggable="true">
<img src="drag icon.png" width="16" height="16"/>
<header>C</header>
<p>
right
</p>
</div>
<div class="box" draggable="true">
<img src="drag icon.png" width="16" height="16"/>
<header>D</header>
<p>
into
</p>
</div>
<div class="box" draggable="true">
<img src="drag icon.png" width="16" height="16"/>
<header>E</header>
<p>
the
</p>
</div>
脚本:
(function () {
var id_ = 'boxes-example';
var boxes_ = document.querySelectorAll('#' + id_ + ' .box');
var dragSrcEl_ = null;
this.handleDragStart = function (e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.5';
// this/e.target is the source node.
this.addClassName('moving');
};
this.handleDragOver = function (e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function (e) {
this.addClassName('over');
};
this.handleDragLeave = function (e) {
// this/e.target is previous target element.
this.removeClassName('over');
};
this.handleDrop = function (e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// Don't do anything if we're dropping on the same box we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
};
this.handleDragEnd = function (e) {
// this/e.target is the source node.
this.style.opacity = '1';
[ ].forEach.call(boxes_, function (box) {
box.removeClassName('over');
box.removeClassName('moving');
});
};
[ ].forEach.call(boxes_, function (box) {
box.setAttribute('draggable', 'true'); // Enable boxes to be draggable.
box.addEventListener('dragstart', this.handleDragStart, false);
box.addEventListener('dragenter', this.handleDragEnter, false);
box.addEventListener('dragover', this.handleDragOver, false);
box.addEventListener('dragleave', this.handleDragLeave, false);
box.addEventListener('drop', this.handleDrop, false);
box.addEventListener('dragend', this.handleDragEnd, false);
});
})();
这是一个基本的html5拖放代码示例。你可以选择任意拖放代码来检查这个问题
默认情况下,图像是可拖拽的,并且似乎优先于其父可拖拽。通过显式地将img draggable设置为false
,它在FireFox上对我有效。<img src="drag icon.png" draggable="false" width="16" height="16"/>
在本例中,我将第一张图像设置为可拖动的,以显示差异。如果第一个被拖拽(B),整个div被拖拽,对于其他div,只拖拽图像。(没有考虑拖动事件中的其他行为,纯粹是如果整个div被拖动)
edit:一个更通用的方法,禁止拖动所有的图像:
[].forEach.call(document.querySelectorAll('img') ,function(img){
img.draggable=false;
});
小提琴
相关文章:
- Firefox奇怪的问题
- Firefox事件.目标问题
- 如果选项被禁用,则多个下拉菜单会导致FIREFOX出现问题
- firefox中的Javascript事件范围问题
- Firefox 15中的HTML5问题
- jQuery - 与 Firefox 的兼容性问题
- 我的Firefox插件和跨域https存在问题
- 俄罗斯木偶与Firefox和Webkit的显示问题:与IE配合良好
- Node.js/Socket.io适用于除Firefox之外的所有应用程序,这可能是缓存问题
- ASP.NET 和Javascript在Firefox问题中不起作用
- 砌体JS插件 - Chrome / Firefox 问题
- contenteditable-选择2个子段落并重写文本(Firefox问题)
- innerhtml出现奇怪的firefox问题
- 传递动态选择值以弹出链接Firefox问题
- 处理动态HTML和Firefox问题
- Facebook标签应用程序画布高度- firefox问题
- jquery按键事件对象keyCode firefox问题
- js滑块的firefox问题
- jquery-ui检索在一个按钮集(复选框)中选择的firefox问题
- 跨浏览器的jQuery - Firefox问题