Question

HTML5拖放事件的行为如下：

'拖动'从被移动的位置移除被拖动的元素 - 我希望它在拖动后保持不变。
drop事件使用“appendchild”方法，它只是“追加”被删除的元素。但是我希望它“添加”而不是“附加”。基本上，如果删除了另一个元素，那么它应该替换现有元素而不是附加第二个元素。

这些要求是否可行？

此致

Abinash。

Answer 1

<head>
    <script>
        var dragSrcEl = null;

        function handleDragStart(e) {
          // Target (this) element is the source node.
          this.style.opacity = '0.4';

          dragSrcEl = this;

          e.dataTransfer.effectAllowed = 'move';
          e.dataTransfer.setData('text/html', this.innerHTML);

        }

        function handleDragOver(e) {
          if (e.preventDefault) {
            e.preventDefault(); // Necessary. Allows us to drop.
          }

          e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

          return false;
        }

        function handleDragEnter(e) {
          // this / e.target is the current hover target.
          this.classList.add('over');
        }

        function handleDragLeave(e) {
          this.classList.remove('over');  // this / e.target is previous target element.
        }
        function handleDrop(e) {
          // this/e.target is current target element.

          if (e.stopPropagation) {
            e.stopPropagation(); // Stops some browsers from redirecting.
            this.classList.remove('over');
          }

          // Don't do anything if dropping the same column we're dragging.
          if (dragSrcEl != this) {
            // Set the source column's HTML to the HTML of the column we dropped on.
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');
          }

          return false;
        }



        function handleDragEnd(e) {
          // this/e.target is the source node.
          this.style.opacity = '1.0';
          [].forEach.call(cols, function (col) {
            col.classList.remove('over');
          });
        }
        function registerEvents()
        {
            var cols = document.querySelectorAll('#columns .column');
            [].forEach.call(cols, function(col) {
              col.addEventListener('dragstart', handleDragStart, false);
              col.addEventListener('dragenter', handleDragEnter, false)
              col.addEventListener('dragover', handleDragOver, false);
              col.addEventListener('dragleave', handleDragLeave, false);
              col.addEventListener('drop', handleDrop, false);
              col.addEventListener('dragend', handleDragEnd, false);
            });
        }
        window.onload = registerEvents;
    </script>
    <style>
        /* Prevent the text contents of draggable elements from being selectable. */
        [draggable] {
          -moz-user-select: none;
          -khtml-user-select: none;
          -webkit-user-select: none;
          user-select: none;
          /* Required to make elements draggable in old WebKit */
          -khtml-user-drag: element;
          -webkit-user-drag: element;
        }
        .column {
          height: 150px;
          width: 150px;
          float: left;
          border: 2px solid #666666;
          background-color: #ccc;
          margin-right: 5px;
          -webkit-border-radius: 10px;
          -ms-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 3px #000;
          -ms-box-shadow: inset 0 0 3px #000;
          box-shadow: inset 0 0 3px #000;
          text-align: center;
          cursor: move;
        }
        .column.over {
          border: 2px dashed #000;
        }

        .column 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)));
          background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
          background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
          border-bottom: 1px solid #ddd;
          -webkit-border-top-left-radius: 10px;
          -moz-border-radius-topleft: 10px;
          -ms-border-radius-topleft: 10px;
          border-top-left-radius: 10px;
          -webkit-border-top-right-radius: 10px;
          -ms-border-top-right-radius: 10px;
          -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px;
        }

    </style>
</head>
<body >
    <div id="columns">
        <div class="column" draggable="true"><header>A</header></div>
        <div class="column" draggable="true"><header>B</header></div>
        <div class="column" draggable="true"><header>C</header></div>
    </div>
</body>

HTML5拖放事件

1 个答案: