[英]conflict in event.dataTransfer.setData
The datatype in event.dataTransfer.setData conflicts in firefox and IE.'text/html' is not supported in IE.So I am suppossed to use 'text'.The problem is firefox does not support 'text'.It supports 'text/html' or 'html' alone.Any solution to fix this issue? firefox和IE中event.dataTransfer.setData中的数据类型冲突.IE中不支持'text / html',因此我被认为使用'text'。问题是firefox不支持'text'。它支持'text' / html”或“ html”。是否有解决此问题的解决方案?
html: 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>
script: 脚本:
(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);
});
})();
This is a sample basic html5 drag and drop code.You can take any drag and drop code and check this issue 这是基本的html5拖放代码示例。您可以使用任何拖放代码来检查此问题
try... 尝试...
this.innerHTML = e.dataTransfer.getData('text') || e.dataTransfer.getData('text/html');
or... 要么...
try {
this.innerHTML = e.dataTransfer.getData('text');
} catch (e) {
this.innerHTML = e.dataTransfer.getData('text/html');
}
if e.dataTransfer.getData
throws an exception... 如果e.dataTransfer.getData
引发异常...
You can use 'text'
, Firefox will convert it to 'text/plain'
. 您可以使用'text'
,Firefox会将其转换为'text/plain'
。 Only thing missing after is preventing default on drop
event. 之后唯一缺少的是防止默认的drop
事件。 This seems to work: 这似乎可行:
e.dataTransfer.setData('text', this.innerHTML);
this.handleDrop = function (e) {
// this/e.target is current target element.
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
// 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');
}
return false;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.