Javascript 本机HTML5拖放在IE11中不起作用_Javascript_Html_Internet Explorer_Drag And Drop_Internet Explorer 11

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

javascript html internet-explorer

Javascript 本机HTML5拖放在IE11中不起作用,javascript,html,internet-explorer,drag-and-drop,internet-explorer-11,Javascript,Html,Internet Explorer,Drag And Drop,Internet Explorer 11,我使用javascript代码在div之间拖放。原生HTML5拖放。这段代码在chrome和firefox中运行良好，但在IE11中不起作用控制台中也没有显示任何内容我找不到这个问题这是我的密码 <html> <head> <style> [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: non

我使用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>

首先，您使用的是“addClassName”，AFAIK可以通过它获得，但不要将其与Jquery的addClass混淆，后者做同样的事情

因此，您需要让它包含prototype.js或使用另一个具有另一种语法的库这足以使脚本运行时不会出错

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

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

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

对于正在寻找在IE11中也能工作的解决方案的人，这里有一篇很好的文章对此进行了解释

它在IE11.0.9600.17801中对我来说非常有效。检查这把小提琴：不为我工作@Daniel什么东西不工作？使用IE11，我可以像在Chrome中一样重新排列盒子！当我创建一个提琴时，它就工作了……但是当我在IE中直接运行代码时，我能够拖动@Danielnakshatra5是正确的，我得到了@Daniel的JSFIDLE测试的相同结果，即：我有相同的问题