最近在用vue3做一个企业后台管理系统的项目,在登录页面的时候需要用户滑动滑块来获取验证码登录系统 用到了元素拖放 这里也顺便记录一下 如何使用的.
目录
1.功能介绍
2.代码部分
3 实现过程
3.1 设置可拖动元素
3.2 拖动什么
3.3 放到何处
3.4 进行放置
1.功能介绍
如下图所示是登录页面的一部分 用户需要输入手机号码 滑动色块至最右边解锁滑块 解锁成功会提示已完成 并且北京颜色变成绿色, 获取验证码之后输入对应的验证码, 登录系统.
需要注意:
1.和在vue中绑定事件和@click一样 都不用on 的 ondragstart 事件 写成@dragstart="" 就好了.
2.接受元素的大小不小于 拖放元素的宽高.
<img id="drag1" src="." draggable="true" @dragstart="drag($event)" >
关于css3 页面布局也可参考博主文章:前端常见的页面布局以及Flexbox总结 【收藏备用】_常用网页盒子布局-CSDN博客
2.代码部分
是一个图片拖放到另一个div中, 实例中是这样的 任何元素都可以拖放的.
<el-form :model="form" label-width="auto" style="max-width: 600px"><el-form-item><el-input v-model="form.name" placeholder="请输入手机号码登录/注册" /></el-form-item><el-form-item class="yzm"><el-input v-model="form.region" placeholder="请输入验证码"/><a @click="getYzm">{{yzmText}}</a></el-form-item><div class="slide-box" ><img id="drag1" src="../../../src/assets/img.jpg" draggable="true" @dragstart="drag($event)" class="slide-box-str"><div class="slide-box-center" :class="[isActive ? activeClass : '']"><span :class="[isFinished ? finishedClass : '']">{{slidetext}}</span><el-icon><Check /></el-icon></div><div id="div1" @drop="drop($event)" @dragover="allowDrop($event)" class="slide-box-end"></div></div><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form> const allowDrop = (event) => {event.preventDefault(); }const drag = (event) => {isShowTip.value = false;event.dataTransfer.setData("Text",event.target.id);}const drop = (event) => {event.preventDefault();let data=event.dataTransfer.getData("Text");event.target.appendChild(document.getElementById(data));} 
3 实现过程
3.1 设置可拖动元素
如下图所示 设置img为可拖动元素
<img draggable="true">3.2 拖动什么
ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据,
dataTransfer.setData() 方法设置被拖数据的数据类型和值
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")
3.3 放到何处
- ondragover
ondragover 事件规定在何处放置被拖动的数据
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()3.4 进行放置
- ondrop
当放置被拖数据时，会发生 drop 事件 ondrop 属性调用了一个函数，drop(event)
function drop(ev)
{ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}4.总结
- 主要介绍了拖放元素实现的功能展示
- 代码部分如何实现的
- 实现过程以及用到的函数
谢谢大家阅读,如果发现问题,请评论区留言,大家共同进步,感谢.
