vue拖拽选项，对应板块移动
html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue拖拽选项，对应板块移动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="js/style.js"></script> <script src="js/vue.js"></script> <script src="js/Sortable.min.js"></script> <script src="js/vuedraggable.umd.min.js"></script> </head> <body> <div class="whole"> <div class="main" :hidden="showHide"> <div class="list"> <div class="title">模块内容</div> <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"> <transition-group> <div class="box" v-for="(item,index) in myArray" :key="item.id" :class="(drag,currentIndex==index)?'listBj':''" @click="navClick(index)"> <div class="left"> <i class="iconfont">{{index==0?'':''}}</i> <span>{{item.name}}</span> </div> <div class="right"> <!-- 编辑 --> <span class="iconfont" @click="editClick(index)"></span> <!-- 显示/隐藏 --> <span class="iconfont" @click.stop="showClick(index)">{{!item.showflag?'':''}}</span> <!-- 删除 --> <span class="iconfont" @click.stop ="delClick(index)"></span> </div> </div> </transition-group> </draggable> </div> <div class="jiemian_box"> <div> <div class="jiemian"> <div class="jiemian_bh" ref="imageWrapper"> <div :id="'id'+index" class="box" v-for="(item,index) in myArray" :key="index" :class="!item.showflag?'aaa':'bbb'"> <img :src="item.img"> <span :class="currentIndex==index?'jiemianBj':''"></span> </div> </div> </div> </div> </div> </div> <!-- 预览 --> <div class="yulan_whole" v-show="yulanShow"> <div class="yulan_main"> <div class="del" @click="yulanDel"> <span class="iconfont"></span> </div> <div class="yulan_box"> <div class="main"> <img :src="imgUrl" > </div> </div> </div> </div> <!-- 编辑 --> <div class="bianji_whole" v-show="bianjiShow"> <div class="bianji_main"> <div @click="bianjiDel" class="iconfont del"></div> <h2>编辑名称</h2> <div class="bianji_box"> <div class="box"> <h3><span>*</span>名称</h3> <input type="text" v-model="navTitle" placeholder="搜索框" /> </div> <div class="btn"> <button type="button" @click="bianjiFix">确定</button> <button type="button" @click="bianjiDel">取消</button> </div> </div> </div> </div> </div> </body> </html>
css
body,div,span,p,em,ul,li,h1,h2,h3,dl,dt,dd,img,header,footer,nav,section,article,video,aside,dialog,figure,figcaption,time{margin: 0;padding: 0;border:0 none; outline:none;font-weight: normal;}
header,footer,nav,section,article,video,aside,dialog,figure,time{display: block;}
ul,li{list-style: none;}
*{margin: 0;border:0;padding: 0;}
@font-face {
font-family: 'iconfont'; /* Project id 3162316 */
src: url('icon/iconfont.woff2') format('woff2'),
url('icon/iconfont.woff?t=1644479636557') format('woff'),
url('icon/iconfont.ttf?t=1644479636557') format('truetype');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.whole{width: 1200px;height: 740px;margin: 0 auto;padding: 30px;display: flex;flex-direction: row;align-items:flex-start;}
.whole .main{display: flex;width: 100%;overflow: hidden;flex-direction: row;}
.whole .main>ul{float: left;}
.list{width: 376px;margin-right: 60px;overflow-x: hidden;overflow-y: scroll;}
.list .title{font-size: 26px;color: #454b60;margin-bottom: 20px;}
.list .box{height: 45px;line-height: 45px;display: flex;flex-direction: row;align-items: center;background: #f4f4f4;border-radius: 5px;justify-content: space-between;padding: 0 20px 0 10px;}
.list .box .left span{margin-top: 5px;}
.list .box .right span{margin: 0 5px;font-size: 20px;cursor: pointer;}
.list .box+.box{margin-top: 7px;}
.list .box .left i{font-size: 20px;}
.list .box .left span{font-size: 18px;color: #454b60;}
.jiemian_box{box-shadow:rgb(240, 246, 250) 0px 0px 18px inset;width: 100%;height: 900px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
.jiemian_box>div{display: flex;flex-direction: row;align-items: end;}
.jiemian{width: 350px;height: 700px;box-shadow: 0 5px 10px #f1f1f1;overflow-y: scroll;}
.jiemian .box{position: relative;}
.jiemian img{width: 100%;display: block;}
.jiemianBj{width: 100%;height: 100%;background: rgba(102,217,239,0.8);position: absolute!important;top: 0;left: 0;}
.jiemian .box span{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.list::-webkit-scrollbar,.jiemian::-webkit-scrollbar,.xinzeng_box::-webkit-scrollbar,.yulan_box::-webkit-scrollbar{display: none;}
/* 预览 */
.yulan_whole,.bianji_whole{width: 100%;height: 100%;background: rgba(0,0,0,.6);position: fixed;top: 0;left: 0;}
.yulan_box{width: 350px;height: 700px;overflow-y: scroll;}
.yulan_main .del{position: absolute;top: 50px;right: 50px;background: #434343;border-radius: 50%;padding: 4px 6px;}
.yulan_main .del span{font-size: 22px;color: #fff;}
.yulan_main .main{}
.yulan_main .main img{width: 100%;height: 100%;display: block;}
.yulan_whole{display: flex;flex-direction: row;align-items: center;justify-content: center;}
/* 编辑 */
.bianji_whole{display: flex;align-items: center;justify-content: center;}
.bianji_main{width: 570px;height: 340px;background: #fff;border-radius: 10px;position: relative;}
.bianji_main .del{position: absolute;top: 28px;right: 75px;font-size: 25px;color: #3f3f3f;}
.bianji_main h2{font-size: 20px;color: #3f3f3f;text-align: center;border-bottom: 1px solid #f0f4f7;padding: 28px 0 33px;}
.bianji_main .bianji_box{display: flex;flex-direction: column;align-items: center;}
.bianji_main .bianji_box div{display: flex;flex-direction: row;align-items: center;}
.bianji_main .box{margin: 40px 0 45px;}
.bianji_main .box h3{font-size: 18px;color: #666666;margin-right: 20px;}
.bianji_main .box h3 span{color: #f6174c;}
.bianji_main .box input{width: 300px;height: 42px;border: 2px solid #eceaea;border-radius: 10px;font-size: 16px;padding-left: 30px;}
.bianji_main .btn button{width: 96px;height: 39px;border-radius: 10px;font-size: 16px;background: none;margin: 0 9px;}
.bianji_main .btn button:first-child,.xinzeng_btn button:first-child{background-image: linear-gradient(to right , #e75161, #ee9261)!important;color: #fff!important;}
.bianji_main .btn button:last-child{border: 2px solid #f1eff0;}
js
window.onload=function(){ // 全局注册组件 Vue.component('vuedraggable', window.vuedraggable) var app=new Vue({ el: '.whole', components: { vuedraggable: window.vuedraggable,//当前页面注册组件 }, data:{ showHide:true, currentIndex:-1, myArray:[ {name:'唐三',id:1,img:'image/1.jpg',index:0,showflag:false}, {name:'兄弟二人',id:2,img:'image/2.jpg',index:1,showflag:false}, {name:'西装路飞',id:3,img:'image/3.jpg',index:2,showflag:false}, {name:'可爱仓鼠',id:4,img:'image/4.jpg',index:3,showflag:false}, {name:'路飞索隆',id:5,img:'image/5.jpg',index:4,showflag:false}, {name:'拥抱艾斯',id:6,img:'image/6.jpg',index:5,showflag:false}, {name:'草帽大家庭',id:7,img:'image/7.jpg',index:6,showflag:false}, {name:'燃烧艾斯',id:8,img:'image/8.jpg',index:7,showflag:false}, {name:'自杀三哥',id:9,img:'image/9.jpg',index:8,showflag:false}, {name:'沙皮狗狗',id:10,img:'image/10.jpg',index:9,showflag:false}, {name:'比耶路飞',id:11,img:'image/11.jpg',index:10,showflag:false}, {name:'金毛',id:12,img:'image/12.jpg',index:11,showflag:false}, ], navTitle:'', bianjiShow:false, navIndex:0, xzIndex:0, fixArry:[], imgUrl:'', }, created (){ this.myArray.forEach(item=>{ item.drag=false; }) }, methods:{ navClick:function(index){ this.currentIndex=index; this.$el.querySelector(`#id${index}`).scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "center" // 上边框与视窗顶部平齐。默认值 }); }, onStart() { for(var i=0;i<this.myArray.length;i++){ this.myArray[i].drag = true; } }, onEnd() { for(var i=0;i<this.myArray.length;i++){ this.myArray[i].drag = false; } }, editClick:function(index){ this.navTitle=this.myArray[index].name; this.bianjiShow=true; }, bianjiDel:function(){ this.bianjiShow=false; }, bianjiFix:function(){ this.bianjiShow=false; this.myArray[this.currentIndex].name=this.navTitle; }, showClick:function(index){ this.myArray[index].showflag=!this.myArray[index].showflag; this.$forceUpdate(); }, delClick:function(index){ this.myArray.splice(index,1); this.$forceUpdate(); }, } }) }
浙公网安备 33010602011771号