用原生js实现简单的拖拽和拖放操作

琴～～

已于 2022-08-24 14:33:22 修改

阅读量294

点赞数

文章标签： javascript css css3

于 2022-08-23 17:22:20 首次发布

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/126489303

版权

用原生js实现简单的拖拽和拖放操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    main {
      width: 100vh;
      height: 100vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .draggable-container {
      flex: 1;
    }

    .draggable {
      width: 200px;
      height: 200px;
      background-color: #00d9ff;
    }

    .droppable {
      flex: 1;
      width: 300px;
      height: 300px;
      border: 8px dashed #00d9ff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .droppable::before {
      display: block;
      content: '请拖放到此区域';
    }

    .dragover {
      border: 8px dashed #ffae00;
    }

    .dropped {
      border: 8px dashed #48ff00;
    }

    .dropped::before {
      z-index: -1;
    }

    .droppable img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <!-- 可拖曳元素:需要增加draggable="true"属性 -->
  <main>
    <div class="draggable-container">
      <!-- 拖拽普通元素 -->
      <!-- <div id='draggable' class="draggable" draggable="true"></div> -->
      <!-- 拖拽图片 -->
      <img id='draggable' class="draggable" draggable="true" src="./成都区域划分图.jpeg"></img>
    </div>
    <div id="droppable" class="droppable"></div>
  </main>
  <script>
    const draggable = document.querySelector('#draggable');
    const droppable = document.querySelector('#droppable');

    /* 在拖拽开始的时候，对拖拽元素进行监听,将其信息利用事件对象中的dataTranfe进行设置 */
    draggable.addEventListener('dragstart', handleDragStart);
    function handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    }

    /* 当拖拽元素经过放置元素的时候，对放置元素进行监听，将其边框颜色改变 */
    droppable.addEventListener('dragover', handleDragover);
    function handleDragover(e) {
      e.preventDefault();
      droppable.classList.add('dragover')
    }

    /* 当拖拽元素离开的时候，对放置元素进行监听，将其边框置为原来的颜色 */
    droppable.addEventListener('dragleave', handleDragLeave);
    function handleDragLeave() {
      droppable.classList.remove('dragover');
    }

    /* 拖拽元素放置时，将拖拽的元素追加到放置区域 */
    droppable.addEventListener('drop', handleDrop);
    function handleDrop(e) {
      e.preventDefault();
      // const draggedId = e.dataTransfer.getData('text/plain');
      // droppable.appendChild(document.getElementById(draggedId));
      droppable.classList.add('dropped');
      [...e.dataTransfer.items].forEach(item => {
        if (item.kind === 'file') {
          const file = item.getAsFile();
          createPreview(file);
        }
      })
    }

    /* 当拖拽元素为图片时：进行的处理 */
    function createPreview(imageFile) {
      if (!imageFile.type.startsWith('image/')) {
        return;
      }
      const image = document.createElement('img');
      image.src = URL.createObjectURL(imageFile);
      image.onload = function () {
        URL.revokeObjectURL(this.src);
      }
      droppable.appendChild(image);
    }
  </script>

</body>

</html>