亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用Javascript實現拖拽排序效果

發布時間:2022-09-23 09:45:12 來源:億速云 閱讀:157 作者:iii 欄目:開發技術

本篇內容主要講解“怎么用Javascript實現拖拽排序效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“怎么用Javascript實現拖拽排序效果”吧!

運行環境:vue3.2以上,復制張貼運行即可看效果
效果如下:

怎么用Javascript實現拖拽排序效果

<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]
    // 刪除老的節點
    newItems.splice(oldIndex,1)
    // 在列表中目標位置增加新的節點
    newItems.splice(newIndex,0,oldNum.value)
    // items改變transition-group就會起作用
    items.value = [...newItems]
  }
}
// 記錄移動過程中信息
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>

到此,相信大家對“怎么用Javascript實現拖拽排序效果”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

汉阴县| 宝山区| 宜黄县| 石阡县| 肥乡县| 得荣县| 衡阳市| 龙陵县| 微山县| 阳东县| 新巴尔虎左旗| 衡南县| 高邑县| 南澳县| 科技| 淳安县| 台山市| 榆林市| 广河县| 永嘉县| 上思县| 新津县| 太原市| 浦江县| 永顺县| 延边| 航空| 嘉义市| 兰州市| 澄江县| 云阳县| 全州县| 全椒县| 溧阳市| 三都| 南召县| 嘉善县| 尖扎县| 延津县| 天台县| 营山县|