问HTML5拖放事件
EN

Stack Overflow用户

提问于 2012-08-11 14:06:26

回答 1查看 430关注 0票数 0

HTML5拖放事件的行为如下：

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

这些要求可能吗？

致以敬意，

阿比纳什。

html

回答 1

Stack Overflow用户

发布于 2014-07-28 11:49:39

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11915348

复制

相似问题

问HTML5拖放事件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5拖放事件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5拖放事件
EN