Html5 drag and drop

最新推荐文章于 2023-02-25 16:47:47 发布

weixin_34258838

最新推荐文章于 2023-02-25 16:47:47 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/laoquans/p/dnd.html

版权

<!DOCTYPE html>
<html>
<head>
  <title>.</title>
  <style type="text/css">
    #columns{width: 380px; height: 120px; border: solid 1px #ccc;}
    .column{width: 100px; height: 100px; line-height: 100px; text-align: center; margin: 10px; border: solid 1px #ccc; float: left;}
    .column.over {
      border: 2px dashed #000;
    }
  </style>
</head>

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

  <script>
/*
Drap and Drop Events:
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
*/
  var dragSrcEl = null;

  function handleDragStart(e) {
    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.
  }

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

    [].forEach.call(cols, function (col) {
      col.classList.remove('over');
    });
  }

  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);
  });
  </script>
</body>

</html>

转载于:https://www.cnblogs.com/laoquans/p/dnd.html

weixin_34258838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 drag and drop

<!DOCTYPE html><html><head> <title>.</title> <style type="text/css"> #columns{width: 380px; height: 120px; border: solid 1px #ccc;} .column{width: 100...
复制链接

扫一扫