vue模块拖拽实现示例代码

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

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

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

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

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

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

话不多说,上代码

<template>
  <div class="view">
   <div class="x" @mousedown="move($event,index)" v-for="(x,index) in i">
    <span v-if="index+1 !== i.length">{{index+1}}</span>
    <input v-model="x.input">
   </div>
   {{i}}
  </div>
</template>

<script>
  export default {
    name: "index",
   data(){
     return{
      positionX:0,
      positionY:0,
      i:[
       {input:''}
      ]
     }
   },
   methods:{
     move(e,x){
      let odiv = e.target;    //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      let flag = true;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
       if(flag && x === this.i.length-1){
        flag = false;
        this.i.push({input:''})
       }
       //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
       let left = e.clientX - disX;
       let top = e.clientY - disY;
       //绑定元素位置到positionX和positionY上面
       this.positionX = top;
       this.positionY = left;
       //移动当前元素
       odiv.style.left = left + 'px';
       odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
       document.onmousemove = null;
       document.onmouseup = null;
      };
     }
   }
  }
</script>

<style scoped lang="less">
 .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;
  }
 }
</style>

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

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

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

(0)

相关推荐

  • Vue.Draggable拖拽功能的配置使用方法

    本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=

  • Vue拖拽组件开发实例详解

    为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: •使用虚拟DOM: •轻量级框架: •高效的数据绑定: •灵活的组件系统: •完整的开发生态链. 这就是我们为什么选择Vue框架的一些原因. 为什么要封装成一个Vue组件? 主要目的是可提高代码的复用性和可维护性. •复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • Vue组件Draggable实现拖拽功能

    Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 具体说明,请参考:学习链接 npm官方演示: vuedraggable特性: 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的UI组件兼容 使用 安装: npm install vuedraggable 页面引入: import draggable from 'v

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • vue插件draggable实现拖拽移动图片顺序

    本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表.商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽. 首先, npm i vuedraggable 然后在组件中引入, import draggable from 'vuedraggable'; 定义组件, components: { draggable, }, 标签中应用, <ul class="pic-list clearfix"

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • vue拖拽排序插件vuedraggable使用方法详解

    大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr

  • 基于Vue实现拖拽效果

    效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY

  • 基于Vue实现拖拽功能

    本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: <div id="box"> 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"> //注意这里要通过指令绑定函数将当前元素的位置数据传出来 </div> &l

  • 基于Vue实现可以拖拽的树形表格实例详解

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插件已打包封装好,发布到npm上 本博文会分为两部分,第一部分为使用方式,第二部分为实现方式 安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table'  模版写法 <dragTreeTa

随机推荐