怎么用Javascript實(shí)現(xiàn)拖拽排序效果

本篇內(nèi)容主要講解“怎么用Javascript實(shí)現(xiàn)拖拽排序效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用Javascript實(shí)現(xiàn)拖拽排序效果”吧!

運(yùn)行環(huán)境：vue3.2以上,復(fù)制張貼運(yùn)行即可看效果
效果如下：

<template>
  <div class="container">
    <transition-group name="flip-list">
      <div v-for="item in items" :key="item" draggable="true" class="items" @dragstart="dragstart(item)"
        @dragenter="dragenter(item)" @dragend="dragend">{{item}}</div>
    </transition-group>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
const oldNum = ref(0)
const newNum = ref(0)
// 記錄初始信息
const dragenter = (param) => {
  newNum.value = param
}
// 做最終操作
const dragend = () => {
  if(oldNum.value !== newNum.value){
    const oldIndex = items.value.indexOf(oldNum.value)
    const newIndex = items.value.indexOf(newNum.value)
    const newItems = [...items.value]
    // 刪除老的節(jié)點(diǎn)
    newItems.splice(oldIndex,1)
    // 在列表中目標(biāo)位置增加新的節(jié)點(diǎn)
    newItems.splice(newIndex,0,oldNum.value)
    // items改變transition-group就會(huì)起作用
    items.value = [...newItems]
  }
}
// 記錄移動(dòng)過程中信息
const dragstart = (param) => {
  oldNum.value = param;
}
</script>
<style scoped>
.items {
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: linear-gradient(45deg, #234, #567);
  color: pink;
}
 
.flip-list-move {
  transition: transform 1s;
}
</style>

到此，相信大家對(duì)“怎么用Javascript實(shí)現(xiàn)拖拽排序效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！