求助一个vue拖拽效果的思路

743567274

在某购物商家后台有一个这样的拖拽效果(GIF图片，请稍等加载)

目前我已经完成的效果：(GIF图片，请稍等加载)

使用的ViteVue，一个主页面：PageConfig.vue
包含left.vue(左边列表)和middle.vue(中间橙色位置)两个vue子组件。(当然，还有一个右侧组件属性页面，没有写出来)
通过left.vue的列表draggable="true"属性来允许拖拽。


拖拽的时候向父组件PageConfig.vue发送拖拽的组件类型消息，通过父组件转递到middle.vue中
在拖放结束时候读取传递到middle.vue中的组件属性来确定是什么组件。


middle.vue的列表使用VUE的拖拽库VueDraggablePlus，可以用来交换红色区域的顺序。


我希望从左边拖过来的时候有一个实时跳转组件位置的一个效果，就和图一的效果差不多。
目前没有一个好的思路来实现~~~

codddder

我之前用的是 sortablejs 这个插件，箭筒放入组件的dom上会自动生成一个div但是这个div没有配置，不能修改，于是我用css的::after 去插入中文提示，给你代码，你参考参考

[HTML] 纯文本查看 复制代码

<style>
.drag-container-empty:before {
  content: "请把组件拖动到头部区域";
}
</style>

peyye

我理解就是一个事件类型吧，鼠标挪过去就相应的把那块展示一下就行

wangxuebing

可以参考  sortablejs，或者直接引入库来用

743567274

codddder 发表于 2024-4-29 10:35
我之前用的是 sortablejs 这个插件，箭筒放入组件的dom上会自动生成一个div但是这个div没有配置，不能修改 ...

感谢，请问这个库是否支持跨组件拖放~