本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下
例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序，vuedraggable可以实现拖拽。
首先，
npm i vuedraggable
然后在组件中引入，
import draggable from 'vuedraggable';
定义组件，
components: {
draggable,
},
标签中应用，
<draggable class=list-group v-model=hotV
2021-11-02 19:19:00
50KB
1
效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。
思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值
布局：大盒子里面是图片，大盒子position:relative；图片position:absolute;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
#wrap{width:800px;height:500px;margin:30px auto; border:1px s
2021-09-23 16:57:38
28KB
1
如果有什么东西可以在桌面上显示图片，就像它们在真实的桌面上一样，可以移动。 我希望这可以满足需求。 基本功能：在可移动窗口上显示所选图片-单击窗口上的任意位置，它就会移动-允许以给定的不透明度在多个不同的窗口上显示多张图片，从而不会妨碍其他图片。
2021-05-12 14:03:37
59KB
1