原生HTML5拖放在IE11中不起作用

Question

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

Answer 1

首先，您要使用通過Prototype.js可使用AFAIK的'addClassName' （不要將其與執行相同操作的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();
                   ..............
                   .......
            };

Answer 2

對於正在尋找也可以在IE11中使用的解決方案的人們，這里有一篇很好的文章對此進行了解釋。 拖放文件上傳

原生HTML5拖放在IE11中不起作用

問題描述

2 個解決方案

解決方案1
0 2017-08-26 18:15:19

解決方案2
0 2019-03-11 11:06:37

原生HTML5拖放在IE11中不起作用

問題描述

2 個解決方案

解決方案1 0 2017-08-26 18:15:19

解決方案2 0 2019-03-11 11:06:37

解決方案1
0 2017-08-26 18:15:19

解決方案2
0 2019-03-11 11:06:37