本机 HTML5 拖放在 IE11 中不起作用答案

【问题标题】：Native HTML5 drag and drop not working in IE11本机 HTML5 拖放在 IE11 中不起作用
【发布时间】：2015-08-06 07:11:25
【问题描述】：

我使用 javascript 代码在我的 div 之间拖放。原生 HTML5 拖放。此代码在 chrome 和 firefox 中运行良好，但在 IE11 中无法运行控制台中也没有显示任何内容我找不到问题

这是我的代码

<html>
<head>
<style>
 [draggable] {
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .box {
      height: 125px;
      width: 125px;
      float: left;
      border: 3px solid #0092BF;
      background-color: #FFEBDD;
      margin-right: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      text-align: center;
      cursor: move;
    }
    .box header {
      color: #fff;
      text-shadow: #000 0 1px;
      box-shadow: 5px;
      padding: 5px;
      background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
      background: -webkit-gradient(linear, left top, right top,
                                   color-stop(0, rgb(0,0,0)),
                                   color-stop(0.50, rgb(79,79,79)),
                                   color-stop(1, rgb(21,21,21)));
      border-bottom: 1px solid #ddd;
      -webkit-border-top-left-radius: 5px;
      -moz-border-radius-topleft: 5px;
      border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      border-top-right-radius: 5px;
    }
    </style>

<body>
  <div id="boxes-example">
        <div class="box" draggable="true">
            <header>A</header>
            <p>
            order!
            </p>
        </div>
        <div class="box" draggable="true">
            <header>B</header>
            <p>
            Put me
            </p>
        </div>
        <div class="box" draggable="true">
            <header>C</header>
            <p>
            right
            </p>
        </div>
        <div class="box" draggable="true">
            <header>D</header>
            <p>
            into
            </p>
        </div>
        <div class="box" draggable="true">
            <header>E</header>
            <p>
            the
            </p>
        </div>
    </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', 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');
                }

                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);
            });
        })();
    </script>

</body>
</html>

【问题讨论】：

对我来说它在 IE11 (11.0.9600.17801) 中完美运行。检查这个小提琴：jsfiddle.net/n4t54c3m
不适合我@Daniel
究竟是什么不工作？使用 IE11，我可以像在 Chrome 中一样重新排序框！
它在我创建小提琴时工作......但是当我直接在 IE 中运行该代码时，我可以拖动 @Daniel
nakshatra5 是对的我对@Daniel 的 jsfiddle 的测试结果相同，即：我有同样的问题

标签： javascript html internet-explorer drag-and-drop internet-explorer-11

【解决方案1】：

首先，您使用的是'addClassName'，AFAIK 可通过Prototype.js 获得（不要将其与 Jquery 的 addClass() 混淆，后者做同样的事情）

因此您需要包含prototype.js 或使用其他语法的库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
这足以使您的脚本无错误地运行

要使拖放工作，您需要在每个 dragenter 和 drop 事件处理程序中添加 preventDefault()：

      this.handleDragEnter = function (e) {
        e.preventDefault();
        this.addClassName('over');
    };

        this.handleDrop = function (e) {
            e.preventDefault();
                   ..............
                   .......
            };

【讨论】：

【解决方案2】：

对于正在寻找同样适用于 IE11 的解决方案的人，这里有一篇很好的文章来解释它。 Drag and Drop File Uploading

【讨论】：