拖拽项目需要拖拽组件，配置大屏知识拓展：拖拽元素需要 draggable 属性拖拽保存数据，通过e.dataTra

项目需要拖拽组件，配置大屏

知识拓展：

拖拽元素需要 draggable 属性
拖拽保存数据，通过e.dataTransfer.setData（）
拖拽的元素里面有子元素img时，需要给img设置draggable='false'

项目使用-核心功能代码

   // 在handleDragStart事件中保存当前拖拽元素信息
   <ul>
       <li
          v-for="(item, index) of baseList"
          :key="index"
          draggable
          @dragstart="handleDragStart($event, item)"
          :data-index="index"
       >
           <span>{{ item.name }}</span>
           <img :src="item.imageUrl" alt="" draggable="false" />
       </li>
   </ul>

    // 在handleDrop事件中接受拖拽的元素信息，
    <div class="previewScreen" @drop="handleDrop" @dragover="handleDragOver"></div>

   // 开始拖拽
   handleDragStart(e, item) {
       e.dataTransfer.setData("showData", JSON.stringify(obj));
   },
        
        
   // 接受拖拽
   handleDragOver(e) {
       e.preventDefault();
       e.dataTransfer.dropEffect = "copy";
   },
   handleDrop(e) {
       e.preventDefault();
       e.stopPropagation();
       const data = JSON.parse(e.dataTransfer.getData("showData"));
   },

demo

<!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>
        
        body {
            /* Prevent the user selecting text in the example */
            user-select: none;
            background-color: #0005;
        }

        #draggable {
            text-align: center;
            background: white;
        }

        .dropzone {
            width: 300px;
            height: 40px;
            background: blueviolet;
            margin: 10px;
            padding: 10px;
        }

        .dropzone.dragover {
            background-color: purple;
        }

        .dragging {
            opacity: .5;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: #0005;
            cursor:copy;
        }
    </style>
</head>

<body>
    <p>askdjkvk</p>
    <div class="dropzone">
        <div id="draggable" draggable="true">
            这个 div 可以拖动 到下面的盒子里
        </div>
    </div>
    <div class="dropzone" id="droptarget"></div>
    <script>
        let dragged;

        /* events fired on the draggable target */
        const source = document.getElementById("draggable");

        source.addEventListener("dragstart", (event) => {
            console.log('dragstart')
            // store a ref. on the dragged elem
            dragged = event.target;
            // make it half transparent
            event.target.classList.add("dragging");
        });

        source.addEventListener("drag", (event) => {
            console.log("dragging");
        });

        source.addEventListener("dragend", (event) => {
            console.log('dragend')
            // reset the transparency
            event.target.classList.remove("dragging");
        });

        /* events fired on the drop targets */
        const target = document.getElementById("droptarget");

        target.addEventListener("dragover", (event) => {
            // prevent default to allow drop
            event.preventDefault();
        }, false);

        target.addEventListener("dragenter", (event) => {
            console.log('dragenter')
            // highlight potential drop target when the draggable element enters it
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.add("dragover");
            }
        });

        target.addEventListener("dragleave", (event) => {
            console.log('dragleave')
            // reset background of potential drop target when the draggable element leaves it
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.remove("dragover");
            }
        });

        target.addEventListener("drop", (event) => {
            console.log('drop')
            // prevent default action (open as link for some elements)
            event.preventDefault();
            // move dragged element to the selected drop target
            if (event.target.classList.contains("dropzone")) {
                event.target.classList.remove("dragover");
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
        });

    </script>
</body>

</html>