027实现可视化编程所需拖拽技术实现方案之vuedraggable

027实现可视化编程所需拖拽技术实现方案之vuedraggable

vuedraggable目前Vue3中节点拖拽更适用的依赖包

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，是一款非常优秀的vue拖拽组件。

特性

支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的过渡动画兼容
支持撤销操作
当需要完全控制时，可以抛出所有变化
可以和现有的UI组件兼容

安装与引入

• 安装：npm install vuedraggable
• 引入：import draggable from 'vuedraggable'

基本拖拽调整排序功能示例

<template>
  <div>
  <div>{{drag?'拖拽中':'拖拽停止'}}</div>
  <!--使用draggable组件-->
 <draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
    </transition-group>
</draggable> 
  </div>
</template>
<style scoped>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 1px #3089dc !important;
        }
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
   components: {
            draggable,
        },
   data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {people:'cn',id:10,name:'www.aa.com'},
        {people:'cn',id:20,name:'www.bb.com'},
        {people:'cn',id:30,name:'www.cc.com'},
        {people:'us',id:40,name:'www.dd.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

跨列表的拖拽实现方案示例

<script setup lang="ts">
import { reactive, ref } from 'vue';
import draggable from 'vuedraggable';
import RawDisplayer from './RawDisplayer.vue';

let id = ref(1);
let list = reactive([
  { name: 'John 1', id: 0 },
  { name: 'Joao 2', id: 1 },
  { name: 'Jean 3', id: 2 },
]);

let list2 = reactive([
  { name: 'Jonny 4', id: 3 },
  { name: 'Guisepe 5', id: 4 },
]);
function getUid() {
  id.value++;
}
function add() {
  getUid();
  list.push({ name: 'Juan ' + id.value, id: id.value });
}
function replace() {
  list.splice(0, list.length);
}
function add2() {
  getUid();
  list2.push({ name: 'Juan ' + id.value, id: id.value });
}
function replace2() {
  list2.splice(0, list2.length);
}
</script>

<template>
  <el-row>
    <el-col :span="6">
      <h3>列表一</h3>

      <draggable
        id="first"
        data-source="juju"
        :list="list"
        class="list-group"
        group="a"
        item-key="name"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
            <el-input style="width: 88px" v-model="element.name"></el-input>
          </div>
        </template>

        <template #footer>
          <div class="btn-group" role="group">
            <el-button type="primary" @click="add">添加节点</el-button>
            <el-button type="primary" @click="replace">清空</el-button>
          </div>
        </template>
      </draggable>
    </el-col>

    <el-col :span="6">
      <h3>列表二</h3>

      <draggable :list="list2" class="list-group" group="a" item-key="name">
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>

        <template #header>
          <div class="btn-group" role="group" aria-label="Basic example">
            <el-button type="primary" @click="add2">添加节点</el-button>
            <el-button type="primary" @click="replace2">清空</el-button>
          </div>
        </template>
      </draggable>
    </el-col>
    <el-col :span="5">
      <RawDisplayer :value="list" title="数据一" />
    </el-col>
    <el-col :span="5">
      <RawDisplayer :value="list2" title="数据二" />
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
h3 {
  padding: 5px 24px;
}
.list-group {
  background-color: #f5f5f5;
  margin: 5px 12px;
  padding: 15px 12px;
}
.list-group-item {
  background-color: #ffffff;
  padding: 18px 12px;
  border: #d8d8d8 1px solid;
  margin-top: -1px;
  cursor: move;
}
.btn-group {
  padding: 15px 0;
}
</style>