拖放问题Firefox答案

【问题标题】：Drag and drop issue firefox拖放问题Firefox
【发布时间】：2015-07-23 10:40:31
【问题描述】：

当我单击 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拖放代码示例。您可以使用任何拖放代码并检查此问题

【问题讨论】：

查看一些代码有助于指出您哪里出错了
我们绝对需要查看您的代码，“工作”示例（如代表您的项目）会有所帮助。你是如何应用你的处理程序的？
完成@Jaromanda X @Ben Philipp

标签： javascript jquery html firefox firefox-os

【解决方案1】：

Image 默认情况下是可拖动的，并且似乎优先于其父可拖动。通过将 img draggable 显式设置为 false，它在 FireFox 上适用于我

<img src="drag icon.png" draggable="false"  width="16" height="16"/>

在this fiddle 中，我将第一张图片设置为可拖动以显示差异。如果第一个被拖动（B）整个 div 被拖动，对于其他的，只有图像被拖动。（没有看拖动事件中的其他行为，纯粹是拖动整个div）

edit：一种更通用的方法，禁用对所有图像的拖动：

 [].forEach.call(document.querySelectorAll('img') ,function(img){
     img.draggable=false;
 });

fiddle

【讨论】：