vue.js3: 拖动排序(vue@3.2.37 / vuedraggable@4.1.0)

一，安装draggable组件:

1，代码地址:

https://github.com/SortableJS/vue.draggable.next

2,下载安装

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm i -S vuedraggable@next
 
added 2 packages in 11s

3,查看已安装的库的版本

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vuedraggable@next
image2pdf@0.1.0 /data/vue/pdf/image2pdf
└── vuedraggable@4.1.0

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-tuo-dong-pai-xu-vue-3-2-37-vuedraggable-4-1/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码

<template>
<div>
  选择图片读取xmp信息(可多选):
  <input type="file" ref="hiddenfile" accept="image/*" multiple @change="handleFile" class="hiddenInput" />

  <div style="width:400px;margin: auto;">
  <draggable
      :list="selFiles"
      item-key="name"
      class="list-group"
      ghost-class="ghost"
      :move="checkMove"
      @start="dragging = true"
      @end="dragging = false"
  >
    <template #item="{ element }">
      <div class="list-group-item">
        <img class="fg" :id="'fg'+element.id" :src="element.fileimg" style="width:400px;display:block;" />
      </div>
    </template>
  </draggable>
  </div>
</div>
</template>

<script>
import {ref} from "vue"
import draggable from "vuedraggable";
export default {
  name: "DragSort",
  components: {
    draggable,
  },
  setup() {
    //选中的图片文件，保存在数组中
    const selFiles = ref([]);
    //移动事件
    const checkMove = (e) => {
      window.console.log("Future index: " + e.draggedContext.futureIndex);
      console.log(selFiles.value);
    }

    //选中图片时，把图片添加到数组
    const handleFile = (e) => {
      let filePaths = e.target.files;
      //清空原有缩略图
      if (filePaths.length === 0) {
        //未选择，则返回
        return
      } else {
        //清空数组中原有图片
        selFiles.value.length = 0;
      }
      //把新选中的图片加入数组
      for( var i=0;i<filePaths.length; i++ ){
        let file = filePaths[i];
        let one = {
          id:i,
          fileimg:URL.createObjectURL(file),  //预览用
          file:file,
        }
        selFiles.value.push(one);
      }
    }

    return {
      checkMove,
      selFiles,
      handleFile,
    }
  }
}
</script>

<style scoped>
.list-group-item {

}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.not-draggable {
  cursor: no-drop;
}
</style>

三，测试效果

四，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vue
image2pdf@0.1.0 /data/vue/pdf/image2pdf
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.3.0
│   │ └── vue@3.2.37 deduped invalid: "2.x" from node_modules/@vue/babel-preset-jsx
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped