vue中实现拖拽排序功能的详细教程

<div :draggable="true">拖拽</div>

<template>
    <transition-group class="list">
      <ul
        @dragstart="dragstart(index)"
        @dragenter="dragenter($event, index)"
        @dragover="dragover($event, index)"
        draggable= "true"
        v-for="(item, index) in list"
        :key="item.label"
        class="list-item"
      >
        {{item.label}}
      </ul>
    </transition-group>
</template>

<script>
export default {
  data() {
    return {
       list: [
        { label: '列表1' },
        { label: '列表2' },
        { label: '列表3' },
        { label: '列表4' },
        { label: '列表5' },
        { label: '列表6' },
      ],
      // 源对象的下标
      dragIndex: '',
      // 目标对象的下标
      enterIndex: '',
      timeout: null,

    }
  },
  destroyed() {
   // 每次离开当前界面时，清除定时器
    clearInterval(this.timeout)
    this.timeout = null
  },
  methods: {
    dragstart(index) {
      console.log('start index ===>>> ',index)
      this.dragIndex = index
    },

    // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。 
    // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
    dragenter(e,index) {  
      e.preventDefault();
      this.enterIndex = index
      if( this.timeout !== null) {
        clearTimeout(this.timeout)
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
         if( this.dragIndex !== index){
            const source = this.list[this.dragIndex]
            this.list.splice(this.dragIndex,1)
            this.list.splice(index, 0 , source )
            // 排序变化后目标对象的索引变成源对象的索引
            this.dragIndex = index;
          }
      }, 100);
    },
    dragover(e, index) {
      e.preventDefault();
    }
  },
}
</script>

<style lang='scss' scoped>
.list {
  list-style: none;
  .list-item {
    // 设置 动画效果
    transition: transform .3s;
    cursor: move;
    width: 300px;
    background: #EA6E59;
    border-radius: 4px;
    color: #FFF;
    margin-bottom: 6px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>

yarn add awe-dnd -S

// 引入拖拽排序插件
import VueDND from 'awe-dnd'
 
Vue.use(VueDND)

<template>
    <div class="title-list">
        <div
            v-dragging="{item: item, list:list}"
            v-for="item in list"
            :key="item.id"
            class="title-item">
            <div class="title-child">
                <span>{{item.id +"－－"+ item.name }}</span>
            </div>
 
        </div>
    </div>
</template>
<script>
export default {
    name: "titleList",
    data() {
        return {
            list: [
                {id:1,name:"这是第一个标题名称"},
                {id:2,name:"这是第二个标题名称"},
                {id:3,name:"这是第三个标题名称"},
                {id:4,name:"这是第四个标题名称"},
                {id:5,name:"这是第五个标题名称"},
            ],
        };
    },
    mounted() {
        // 拖拽事件
        this.$dragging.$on("dragged", (result) => {
            // 将排序后的结果重新赋值
            this.list = result.value.list;
        });
    },
};
</script>
 
<style lang="scss" scoped>
    .title-list {
        width: 350px;
        background:#fff;
        margin:100px auto 0;
        border: 1px solid red;
        .title-item {
            width: 350px;
            cursor: pointer;
            border: 1px solid #ededed;
            .title-child {
                width: 330px;
                height: 60px;
                margin: 0 auto;
                position: relative;
                span {
                    width: 100%;
                    font-size: 14px;
                    color: red;  
                    line-height: 30px;
                    // 只显示两行，多余的以省略号显示
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    // 无论一行还是两行均居中显示
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
        }
    }
</style>

// 拖拽事件
this.$dragging.$on("dragged", (result) => {
    debugger  // console.log('result===>',result)
    // result 拖拽后的信息  将排序后console.log的结果重新赋值
    this.list = result.value.list;
});

yarn add vue-smooth-dnd -S

<Container
group-name="col"
@drop="(e) => onCardDrop(column.id, e)"
:get-child-payload="getCardPayload(column.id)"
drag-class="card-ghost"  
drop-class="card-ghost-drop"
:drop-placeholder="dropPlaceholderOptions"
class="draggable-container"
>
    <Draggable v-for="task in column.list" :key="task.id">
        <div class="task-card">
            <div class="task-title">{{ task.name }}</div>
            <div
            class="task-priority"
            :style="{ background: priorityMap[task.priority].color }"
            >
            {{ priorityMap[task.priority].label }}
            </div>
        </div>
    </Draggable>
</Container>

data() {
    /// 拖拽时占位符样式
	dropPlaceholderOptions: {
        className: "drop-preview",
        animationDuration: "150",
        showOnTop: true,
     },	
}

dragResult: {
    payload,        // 负载 可以理解为用来记录被拖动的对象
    isSource,       // 是否是被拖动的容器本身
    willAcceptDrop, // 是否可以被放置
}

dragResult: {
    addedIndex,     // 被放置的新添加元素的下标，没有则为 null
    removedIndex,   // 将被移除的元素下标，没有则为 null
    payload,        // 拖动的元素对象，可通过 getChildPayload 指定
    droppedElement, // 放置的 DOM 元素
}

<Container :get-child-payload="getChildPayload">
    
getChildPayload (index) {
  return {
    // generate custom payload data here
  }
}

<Container :should-accept-drop="shouldAcceptDrop">

shouldAcceptDrop (sourceContainerOptions, payload) {
  return true;
}

<Container :should-animate-drop="shouldAnimateDrop">

shouldAnimateDrop (sourceContainerOptions, payload) {
  return false;
}

<Container :get-ghost-parent="getGhostParent">

getGhostParent() {
  // i.e return document.body;
}

<Container @drag-start="onDragStart">

onDragStart (dragResult) {
  const { isSource, payload, willAcceptDrop } = dragResult
}

<Draggable v-for="column in taskColumnList" :key="column.name" :tag="{value: 'tr', props: {class: 'my-table-row'}}">
</Draggable>

// --------------或者-----------------

<Draggable v-for="column in taskColumnList" :key="column.name" tag="tr">
</Draggable>

<template>
  <div>
    <div class="simple-page">
      <Container @drop="onDrop">
        <Draggable v-for="item in items" :key="item.id">
          <div class="draggable-item">
            {{ item.data }}
          </div>
        </Draggable>
      </Container>
    </div>
  </div>
</template>

<script>
import { Container, Draggable } from "vue-smooth-dnd";

const applyDrag = (arr, dragResult) => {
  const { removedIndex, addedIndex, payload } = dragResult;
  console.log(removedIndex, addedIndex, payload);
  if (removedIndex === null && addedIndex === null) return arr;

  const result = [...arr];
  let itemToAdd = payload;

  if (removedIndex !== null) {
    itemToAdd = result.splice(removedIndex, 1)[0];
  }

  if (addedIndex !== null) {
    result.splice(addedIndex, 0, itemToAdd);
  }

  return result;
};

const generateItems = (count, creator) => {
  const result = [];
  for (let i = 0; i < count; i++) {
    result.push(creator(i));
  }
  return result;
};

export default {
  name: "Simple",
  components: { Container, Draggable },
  data() {
    return {
      items: generateItems(50, (i) => ({ id: i, data: "Draggable " + i })),
    };
  },
  methods: {
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult);
    },
  },
};
</script>

<style>
.draggable-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: block;
  background-color: #fff;
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin-bottom: 2px;
  margin-top: 2px;
  cursor: default;
  user-select: none;
}
</style>

yarn add vuedraggable

import draggable from 'vuedraggable'

<template>
  <div class="app-container">
      <div :class="canEdit? 'dargBtn-lock el-icon-unlock': 'dargBtn-lock el-icon-lock' " @click="removeEvent()">{{canEdit? '调整':'锁定'}}</div>
      <ul class="projset-content">
        <draggable
          :forceFallback="true"
          :move="onMove"
          :list="imgList"
          handle=".dargBtn"
          :animation="1000"
          filter=".undraggable"
          fallbackClass="fallbackStyle"
          ghostClass="item_ghost"
          chosenClass="chosenStyle"
          dragClass="dragStyle"
         
        >
          <li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
            <div class="dargBtn">
              <svg-icon icon-class="drag" />
            </div>
            <img :src="item.path" alt="">
            <span>{{item.name}}</span>
          </li>
        </draggable>
      </ul>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  export default {
    components: { draggable},
    data(){
      return{
        canEdit:true,
        imgList: [
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg',
            name: '1',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/26202931_14.jpg',
            name: '2',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/27788166_14.jpg',
            name: '3',
          }
        ]
      }
    },
    created() {
    },
    mounted(){},
    methods:{
      onMove(relatedContext, draggedContext){
        console.log(relatedContext.relatedContext.list);
      },
      removeEvent (item) {
        if(this.canEdit){
          this.canEdit = false;
        }else{
          this.canEdit = true;
        }
        console.log(this.canEdit);
      }
    }
  }
</script>


<style scoped lang="scss">
  .app-container{
    background: #ffffff;
    height: 100%;
    .dargBtn-lock{
      margin: 0px 50px;
      color: #2ea9df;
    }
    .dragStyle {
      padding: 10px;
      border-radius: 4px;
      opacity: 1;
    }
    .fallbackStyle{
      padding: 10px;
      border-radius: 4px;
      opacity: 1;

    }
    .chosenStyle {
      padding: 10px;
      border-radius: 4px;
      opacity: 1 !important;

    }
    .item_ghost {
      opacity: 0 !important;
    }
    .projset-content{
      list-style-type: none;
      position: relative;
      li{
        display: inline-block;
        margin: 10px;
      }
      img{
        width: 141px;
        height: 100px;
      }
      span{
        justify-content: center;
        display: flex;
      }
      .dargBtn{
        position: absolute;
        line-height: 100px;
        text-align: center;
        width: 141px;
        height: 100px;
        display: none;
        color: white;
        // background: rgba(101, 101, 101, 0.6);
      }
      .draggable{
        cursor: pointer;
        width: 141px;
        height: 100px;
      }
      .draggable:hover .dargBtn{
        display: block;
      }
     
    }
  }
</style>

  <transition>
      <draggable
        :delay="300"
        :fallback-tolerance="0"
        :list="dragList"
        :force-fallback="true"
        fallback-class="dragging_style"
        handle=".card-title"
        drag-class="drag-style"
        ghost-class="ghost-style"
        chosen-class="chosen-style"
        @update="handleUpdateDrag"
        class="home-drag-wrapper">
        <div v-for=" item in dragList" :key="item.id" :class="item.className" class="home-part">
          <component :is="item.name" :ref="item.name" class="drag-handle " :class=" item.id !== 1? (item.id !== 2? 'card': ''):''">				 </component>
        </div>
      </draggable>
    </transition>

.ghost-style {
  opacity: 0;
  cursor: grabbing !important;
}
.chosen-style {
  background-color: rgba(242, 245, 250, .5);
  border-radius: 8px;
  z-index: 1000;
  box-shadow: 0px 3px 28px #BAC4D4;
  cursor: grabbing !important;

}
.dragging-style {
  border: 1px solid yellow;
}
.drag-style {
  background-color: rgba(242, 245, 250, .5);
  border-radius: 8px;
  z-index: 1000;
  box-shadow: 0px 3px 28px #BAC4D4;
  opacity: 1 !important;
}