作者做这个东西的时候碰到了一个很大的坑，就是拖放效果出来了，但是拖放的时候没有拖放自带的动画效果
然后作者网上一查 原来 只有 a标签和img标签才有这个动画效果，其他标签都没有。
最后发现 即使用了 a标签 还是没有出现 动画效果 如下图 拖放时会出现 阴影块，这不是我们想要的拖放效果
因为 我们在 a标签里 引用的 href 或者 router-link 里引用了 :to="路由" 这样就会出现上面的情况。
当我们把 a标签 或者 router-link标签 去掉 标签直接跳转路由的类，直接用@click事件来跳转路由，那么就能成功解决这个问题，如下图：
好了，我们继续讲解拖放效果直接上代码：
<ul ref="parent">
<li>
<nuxt-link class="tags-li-title" to="/" style="padding:0 8px 0 12px;">首页</nuxt-link>
</li>
<li style="position: relative;" class="tags-li"
v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"
draggable="true" @dragstart="dragstart($event,item)" @dragover="dragover($event)" @drop="drop($event)">
<a class="tags-li-title" @click="routerClick(item)">
{{item.query.title}}
</a>
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> // 关闭标签
</li>
</ul>
CSS： // 样式都是 次要的，布局还是 自己写比较好，写完样式 在写 v-for循环就很简单了。
.tabs{
background: #fff;
width: 100%;
text-align: center;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
padding: 10px 0;
}
.tabs ul li{
list-style: none;
line-height: 36px;
margin: 0;
font-size: 14px;
color: #606266;
cursor: pointer;
outline: none;
}
.tags-li {
float:left;
margin:4px;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #e4e4e4;
color: #666;
background: #fff;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.tags-li-title {
color: #606266;
display: block;
padding:0 18px 0 10px;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tags-li-icon{
position: absolute;
right: 4px;
top: 0px;
}
.tags-li.active {
color: #fff;
border: 1px solid #3498db;
background-color: #3498db;
}
JS：// 这里直接 复制黏贴就行
methods:{
drop(e){ // 拖放中
const that = this;
var eo = e || event;
eo.preventDefault();
this.changeDom = eo.currentTarget;
this.endX = eo.clientX;
if(this.endX - this.startX >= 0){
this.$refs.parent.insertBefore(this.moveDom,this.changeDom.nextSibling);
}else{
this.$refs.parent.insertBefore(this.moveDom,this.changeDom);
}
let domList = this.$refs.parent.childNodes; // 在前面html中设置id
let arr = [];
for(let i=0;i < domList.length;i++){// 取出各id
if(domList[i].id){
arr.push(domList[i].id)
}
}
let newList = [];
for (let v1 of arr.values()) { // 根据id 重新组合数据
for (let v of that.list.values()) {
if(v1 == v.id ){
newList.push(v);
}
}
}
},
dragstart (e,item) { // 开始拖拽
var eo = e || event;
this.moveDom = eo.currentTarget;
this.startX = eo.clientX;
this.startY = eo.clientY;
},
dragover(e){ // 结束拖拽
var eo = e || event;
eo.preventDefault();
this.changeDom = eo.currentTarget;
this.endX = eo.clientX;
this.endY = eo.clientY;
if(this.endX - this.startX >= 0){
this.$refs.parent.insertBefore(this.moveDom, this.changeDom.nextSibling);
} else {
this.$refs.parent.insertBefore(this.moveDom, this.changeDom)
}
},
}
网友评论