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

首先，您正在使用'addClassName'通过Prototype.js提供AFAIK（不要将其与Jquery addClass()混淆同样的事情）

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

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

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

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

Answer 2

查看cross browser implementation，IE似乎需要<a>标记，其href=""属性集或<img>标记。

比照http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/了解更多信息。

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

2 个答案: