您正在使用IPV4(3.225.221.130)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 冬至节 26
2022年 圣诞节 29
2023年 元 旦 36
2023年 春 节 57
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
Javascript实现拖拽排序的代码
内容摘要: templatedivclass='container'transition-groupname='flip-list'divv-for='iteminitems':[email protected]='dragstart(item)[email protected]='dragenter(item)[email protected].....
<template>

<divclass="container">

<transition-groupname="flip-list">

<divv-for="iteminitems":key="item"draggable="true"class="items"@dragstart="dragstart(item)"

@dragenter="dragenter(item)"@dragend="dragend">{{item}}</div>

</transition-group>

</div>

</template>

<scriptsetup>

import{ref}from"vue";

constitems=ref([1,2,3,4,5,6,7,8,9])

constoldNum=ref(0)

constnewNum=ref(0)

//记录初始信息

constdragenter=(param)=>{

newNum.value=param

}

//做最终操作

constdragend=()=>{

if(oldNum.value!==newNum.value){

constoldIndex=items.value.indexOf(oldNum.value)

constnewIndex=items.value.indexOf(newNum.value)

constnewItems=[...items.value]

//删除老的节点

newItems.splice(oldIndex,1)

//在列表中目标位置增加新的节点

newItems.splice(newIndex,0,oldNum.value)

//items改变transition-group就会起作用

items.value=[...newItems]

}

}

//记录移动过程中信息

constdragstart=(param)=>{

oldNum.value=param;

}

</script>

<stylescoped>

.items{

width:300px;

height:50px;

line-height:50px;

text-align:center;

background:linear-gradient(45deg,#234,#567);

color:pink;

}

.flip-list-move{

transition:transform1s;

}

</style>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js实现图片粘贴上传到服务器并展示的实例 下一篇:JS点击某个图标或按钮弹出文件选择框的实
发布日期:2022/9/26
手机扫二维码直达本页
发布时间:12:18:11
点  击:5
录  入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022