Javascript實(shí)現(xiàn)拖拽排序的代碼
更新時(shí)間：2022年09月22日 16:31:11 作者：zhaojiancheng
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼，本文在vue運(yùn)行環(huán)境下給大家演示下效果圖，對(duì)js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧
運(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)過(guò)程中信息
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>到此這篇關(guān)于Javascript實(shí)現(xiàn)拖拽排序的文章就介紹到這了,更多相關(guān)js拖拽排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。代碼簡(jiǎn)單易懂，效果非常好，需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
移動(dòng)端H5頁(yè)面返回并刷新頁(yè)面（BFcache）的方法
這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5頁(yè)面返回并刷新頁(yè)面（BFcache）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
圖片自動(dòng)更新(說(shuō)明)...2006-10-10
詳解JavaScript中Generator函數(shù)的使用
Generator 是 ES6 新增的一種函數(shù)類型，這篇文章主要來(lái)和大家詳細(xì)聊聊Generator函數(shù)的具體用法，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-06-06
JS+CSS實(shí)現(xiàn)的日本門(mén)戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的日本門(mén)戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果,涉及JavaScript針對(duì)頁(yè)面元素的動(dòng)態(tài)遍歷及樣式動(dòng)態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
解決前端接收 type:"application/octet-stream" 格
前端接收 type: “application/octet-stream“ 格式的數(shù)據(jù)并下載,還有后端既返回octet-stream還返回JSON數(shù)據(jù)時(shí)的處理方法,今天給大家分享前端接收 type:"application/octet-stream" 格式的數(shù)據(jù)并下載(解決后端返回不唯一問(wèn)題)的解決方案,感興趣的朋友一起看看吧2023-12-12
如何利用Promises編寫(xiě)更優(yōu)雅的JavaScript代碼
如何利用Promises編寫(xiě)更優(yōu)雅的JavaScript代碼？下面小編就為大家?guī)?lái)一篇用Promises編寫(xiě)更優(yōu)雅的JavaScript代碼。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
arcgis for js 修改infowindow樣式的方法
下面小編就為大家?guī)?lái)一篇arcgis for js 修改infowindow樣式的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了javascript合并表格單元格實(shí)例代碼,在某些應(yīng)用中需要?jiǎng)討B(tài)的合并單元格，感興趣的朋友可以參考一下2016-01-01