vue模块拖拽实现示例代码

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

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

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

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

数据驱动，建立一个数组，数组初始长度为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可以换成子组件。这里提供分享一个底层的实现方式

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