event.dataTransfer.setData中存在冲突

conflict in event.dataTransfer.setData

本文关键字：存在 冲突 setData dataTransfer event      更新时间：2023-09-26

event.dataTransfer.setData中的数据类型在firefox和IE中冲突。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>

脚本：

  (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拖放代码。您可以使用任何拖放代码并检查此问题

尝试。。。

this.innerHTML = e.dataTransfer.getData('text') || e.dataTransfer.getData('text/html');

或者。。。

try {
  this.innerHTML = e.dataTransfer.getData('text');
} catch (e) {
  this.innerHTML = e.dataTransfer.getData('text/html');
}

如果e.dataTransfer.getData抛出异常。。。

您可以使用'text'，Firefox会将其转换为'text/plain'。之后唯一缺少的是阻止默认drop事件。这似乎奏效了：

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

http://jsfiddle.net/3fL5w1aq/

相关文章：