vue3中如何实现标准元素拖动功能【收藏备用】

最近在用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.总结