微客导航 » 文章资讯 » vue和H5 draggable实现拖拽并替换效果

vue和H5 draggable实现拖拽并替换效果

2023-07-19 16:46:06 222

前言

公司项目需要做拖拽替换效果，本人用的vue框架。在网上找了很多资料都是用的Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果，我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。

JQ有实现拖拽的插件，我下载过一个插件并看过源码，大致原理是给目标元素设置定位属性，通过监听鼠标mousedown，mouseup事件，再计算鼠标位置变化，然后给元素样式设置偏移值来实现拖拽效果的。

H5提供了专门的拖拽API给元素添加draggable属性，设置为true就能实现拖拽了。本文使用的H5提供的拖拽API以及vue无其他任何添加，请放心使用

直接上代码






.container{
background-color:#eee;
height:800px;
}
.layout.layout-btn{
background-color:#409eff;
color:#fff;
padding:10px15px;
margin:10px15px;
}
.tips{
font-size:24px;
text-align:center;
}
.group{
float:left;
overflow:hidden;
box-sizing:border-box;
}
.group-title{
height:40px;
line-height:40px;
}
.cls-default{
float:left;
margin:0;
box-sizing:border-box;
overflow:hidden;
border:1pxsolid#999;
}
.cls-default.content{
text-align:center;
padding-top:20px;
font-size:20px;
}
.top-container{
height:400px;
width:40%;
margin:15px5%;
}
.top-container.cls-default{
width:33.33%;
height:33.33%;
}
.top-container.cls1-0{
width:100%;
height:100%;
}
.top-container.cls2-0{
width:50%;
height:100%;
}
.top-container.cls3-0{
width:50%;
height:100%;
}
.top-container.cls3-1{
width:50%;
height:50%;
}
.top-container.cls4-0{
width:50%;
height:50%;
}
.top-container.cls6-0{
width:66.66%;
height:66.65%;
}
.bottom-container{
width:90%;
height:200px;
margin:15px5%;
}
.bottom-container.cls-default{
width:15%;
height:150px;
}

写在最后

本文是我第一次写博客，写的比较随意，样式处理也是很随心。如有错误请指正。

后面有时间会完善组件的功能。参考Vue.Draggable(git地址)这个组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue和H5 draggable实现拖拽并替换效果

热门推荐

随机推荐