vue项目动态拖动生成元素的实现以及不同屏幕的适配

 

需求描述：

右边标签栏中的每个标签都可以被拖动，是目标元素。左边每个矩形框是容器，要做到三点。

一：标签拖到对应的容器范围内部后要在容器内部添加一个固定样式的元素

二：容器（矩形框）的数量不固定，可以任意删除，也可以从尾部增加

三：已被拖动到容器的元素可被删除，也可以拖动到其他容器里面(移动)

代码分析：

一：拖动的实现

二：拖动结束，元素位置的确定

三：数据的处理

首先是拖动的实现：

1.为需要拖动的目标元素添加属性 draggable = "true"

<div class="tagSet">
   <span v-for="item in tagSet" :key="item.id" :draggable="true"   
    @dragend.stop="dragEnd($event, item)">
       {
  {item.name}}
   </span>
</div>

其中dragend是拖拽结束时候触发的事件，stop为修饰符，也就是拖拽鼠标松开时触发的事件，里面的方法一会详解

2.鼠标禁止样式的取消

      在拖动的时候发现鼠标的样式是禁止样式，就是一个黑圆圈内部一个斜杠，很不好看。可以通过对容器添加@dragenter.prevent @dragover.prevent属性来解决。

<div class="bigrule" @dragenter.prevent @dragover.prevent>

这里的容器不仅仅指的是那些矩形框，我是给整个页面的那个大盒子加了这个属性，这样拖动的时候在整个大盒子里面鼠标的样式都是我想要的，如果仅仅给那三个框加这个属性，那么在鼠标还没到框的时候就还会出现禁止图标，这可以根据个人的需求自己选择。

至此，拖动功能已经实现，接下来是放置功能

上代码

结构部分

<el-card class="box-card secondCard" v-for="(item, index) in rule" :key="index">
   <