容器内元素拖拽到另一个容器_vue实现拖拽到容器里

用VUE3实现

在 dragstart 事件处理程序中，我们得到了用户拖动元素的引用。
在目标容器的 dragover 事件处理程序中，我们调用 event.preventDefault()，这使它能够接收 drop 事件。
在放置区域的 drop 事件处理程序中，我们将可拖动的元素从原始区域移动到可放置区域。

<!-- 拖拽 -->
	<div v-for="v in data" draggable="true" @dragstart="dragstart(v)"></div>
</div>
<!-- 目标 -->
<div @dragover="event => event.preventDefault()" @drop="drop($event)">
</div>
// 开始拖拽元素时触发
function dragstart(v){
	console.log(v)
// 拖拽元素释放时触发
function drop(event){
	console.log(event)
                                    2. 鼠标按下时 要加上 e.preventDefault() 阻止冒泡，当元素为图片时，不加 e.preventDefault() 会造成鼠标松开时未移除元素的移动事件 mousemove。首先是鼠标按下事件，鼠标按下之后，全局添加监听事件，监听鼠标的移动和鼠标的松开事件。下面是全部代码（demo只做了上和左不能移出容器的处理，下和右同理）之前做过元素的拖拽及数据传输，最近碰到一个在容器内拖拽移动的需求。1. 元素距离容器的距离不能为负值（若未负值则元素会移出容器外）鼠标松开时移除监听事件。
                                    这个img的值用img: require("../img/sbhclfx.png"),即可。需求就是这样的哈 拖拽的时候需要有一个预览效果。拖拽的事件:拖拽时动态修改变量值。每个组件应该有自己的img像这样。我们这里使用css的变量来控制。
dragstart：用户开始拖动元素时触发
dragenter： 当被鼠标拖动的对象进入其容器范围内时触发此事件
dragover：当某被拖动的对象在另一对象容器范围内拖动时触发此事件
dragend：用户完成元素拖动后触发
其他具体函数可以看菜鸟教程的详细介绍
初步实现参考
<template>
  <ul class="list">
                                    HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个  元素为例展示了这些工作是如何完成的。一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。
                                    之前用过一个vue的插件叫vue-slicksort，专门用来拖动元素的，但是只支持标签内拖拽，跨标签的拖拽暂时还不知道有没有这样的一款插件。自己动手丰衣足食，虽然这个是在vue环境下作的，但逻辑也都是原生js写的，所以vue还是其他什么框架的也都无所谓。
html结构
<template>
  <div class="hello">
    <div class=...