好资源导航 » 文章资讯 » vue模块拖拽实现示例代码

vue模块拖拽实现示例代码

2023-08-27 00:10:04 49

正巧在之前面试中遇到问实现拖拽效果

当时面试的时候简单回答了实现的方式与逻辑。

现在闲来无事，把这个东西实现了一下。

原理很简单，写的很方便。

数据驱动，建立一个数组，数组初始长度为1

拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。

话不多说，上代码






.view{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#f8f8f8;
.x{
width:250px;
height:50px;
top:50px;
left:10px;
position:absolute;
background:red;
color:yellow;
}
}

一个简单的demo，后续用的话可以再丰富，比如以拖动长度来触发事件。

input可以换成子组件。这里提供分享一个底层的实现方式

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

返回顶部
514930285
czq8825@qq.com