不可思议!Vue拖拽插件的实战大揭秘,竟然惊人抛弃了常规选择!

这篇具有很好参考价值的文章主要介绍了不可思议!Vue拖拽插件的实战大揭秘,竟然惊人抛弃了常规选择!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是程序视点的小二哥

因为项目上有一个在规定区域内自由拖拽的小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件。

介绍

vue-drag-resize是一个用于拖拽,缩放的组件根据网上搜索到的使用教程,都是照着文档翻译了一遍,根本解决不了我想要的问题花了几天时间,于是记录下了这个组件的一些使用教程

  • 简单使用
  • 限制拖拽范围
  • 修改组件的默认样式
  • 拖拽的层级
  • 拖拽的点击事件

安装使用


vue-drag-resize是一个专门用于vue项目的拖拽组件,定义元素可拖拽,或者可缩放,或者二者兼有;可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素;并且支持触摸事件

🤖安装

npm i -s vue-drag-resize  

👨‍💻引入

<template>  
  <div class="father" >  
    <VueDragResize  
        :w="100"   
        :h="100"   
        :z="1"  
        :x="10"   
        :y="10"  
    >  
    //图片,div或其他元素  
    </VueDragResize>  
  </div>  
</template>  
<script>  
import VueDragResize from 'vue-drag-resize'  
export default {  
  name: 'Drag',  
  components: {  
    VueDragResize  
  },  
}  
</script>  

和普通的组件引入没有什么区别,需要注意的是要有一个父容器来盛放拖动的元素,并且要给父容器设置相对定位,否则拖动元素将会自动相对于视图窗口定位

  • 拖动元素默认宽高是200px
  • w可以设置元素的宽,设置时不需要带单位,如果设置auto则为组件内部内容的宽度
  • h是高
  • x表示相对于父元素在x轴上的初始偏移量
  • y是在y轴上的初始位置

引入好组件后,此时拖拽元素既可以拖拽,也可以缩放,可以使用isDraggable来控制是否允许拖拽,默认是true

//禁止拖拽  
<vue-drag-resize :isDraggable="false">  
//禁止缩放  
<vue-drag-resize :isResizable="false">  

此文主要介绍拖拽!!!

限制拖拽范围

如果不设置拖拽范围,可以在整个页面进行拖拽


可以使用parent-limitation限制只在父元素内拖动也可以手动设置拖拽范围的宽高parentW,parentH

//指定只在父元素内拖动  
<vue-drag-resize :parent-limitation="true">  
//自由设置拖动范围  
<vue-drag-resize   
  :parentW="2000"   
  :parentH="2000"   
>  

修改组件的默认样式

拖拽的组件在点击拖拽时,会有一个默认的虚线边框

不可思议!Vue拖拽插件的实战大揭秘,竟然惊人抛弃了常规选择!

可以在style里设置取消默认虚线

// 取消默认外边框虚线  
.vdr.active:before {  
  display:none;  
}  

👏🏻拖拽的层级

vue-drag-resize的层级默认是第一个元素最小,然后依次递增

项目有个要求:当拖动元素时,始终保持拖动的元素在最上层,此时就需要监听拖动元素,把当前元素设置为最高级使用@clicked事件监听,当点击拖动元素时,可以传如此元素的索引,把此元素的层级设置为最高,其他的设置为最低

<template>  
  <div class="father" >  
    <VueDragResize  
        :w="100" :h="100" :z="temp[0]"  
        :x="10" :y="10"  
        :parent-limitation="true"  
        :is-resizable="false"   
        @clicked="act(0)"  
        @dragging="dragging"  
    >  
      <img src="../assets/bag.png" alt=""  
        :style="{width:wid+'px'}"  
      >  
    </VueDragResize>  
    <VueDragResize  
        :w="100" :h="100" :z="temp[1]"  
        :x="200" :y="100"  
        :parent-limitation="true"  
        @clicked="act(1)"  
        @activated="onActivated"  
    >  
      <img src="../assets/watch.png" alt=""  
           :style="{width:wid+'px'}"  
      >  
    </VueDragResize>  
  </div>  
</template>  
  
<script>  
import VueDragResize from 'vue-drag-resize'  
  
export default {  
  name: 'Drag',  
  data() {  
    return {  
      temp: [0, 0],  
    }  
  },  
  components: {  
    VueDragResize  
  },  
  methods: {  
    act(index) {  
      for(let i=0;i<this.temp.length;i++){  
        this.temp[i]=1  
      }  
      this.temp[index]=10  
      this.$forceUpdate()  
    },  
  }  
}  
</script>  
  
<style scoped>  
.father {  
  height: 400px;  
  width: 700px;  
  border: 1px solid red;  
  position: relative;  
  margin: 0 auto;  
}  
.drag{  
  border: 2px solid red;  
}  
</style>  

为什么要选择手写

鞋子合不合适只有穿过才知道,轮子能不能用,只有暴露出问题才知道因为我们的项目不仅仅是用在电脑上的,电子白板上也会跑,于是就产生了适配的问题,在不同设备上有可能会造成位置错乱。为了适配不同的电子白板,以往我们都是规定以rem为单位,但是,插件传入的数据都是以px为单位的,根本无法适配不同的屏幕所以,这个时候手写一个拖动元素,才是最为安全的。文章来源地址https://www.toymoban.com/news/detail-622379.html

到了这里,关于不可思议!Vue拖拽插件的实战大揭秘,竟然惊人抛弃了常规选择!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 拖拽插件 Vue3DraggableResizable

    Vue3DraggableResizable 拖拽插件的官方文档 一、Vue3DraggableResizable 的属性和事件 属性 类型 默认值 功能描述 示例 initW Number null 设置初始宽度(px) Vue3DraggableResizable :initW=“100” / initH Number null 设置初始高度(px) Vue3DraggableResizable :initH=“100” / w Number 0 组件的当前宽度(px),你

    2024年02月03日
    浏览(41)
  • vue3项目中引入dialog插件,支持最大最小化、还原、拖拽

    效果图:  上图是layui-vue组件库中的layer插件,我的项目使用的是element-plus组件库,在用不上layui组件库的情况下,就单独引入 @layui/layer-vue 这个弹层插件就可以了 npm地址:@layui/layer-vue - npm layui-vue组件库地址:Layui - Vue 前端 UI 框架  使用方式: 1.按照npm地址的Readme操作,在

    2024年02月14日
    浏览(43)
  • vue2&vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

    Vue3组件地址 Vue2组件地址 Vue2基于ElementUi再次封装基础组件文档 vue3+ts基于Element-plus再次封装基础组件文档

    2024年02月08日
    浏览(55)
  • vue + gojs 实现拖拽流程图(实战项目)

    最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发。其次,要依赖于内部API开发需求,开发项目实战需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发。话不多说,我就先

    2023年04月24日
    浏览(43)
  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

    npm i sortablejs --save 或者 yarn add sortablejs   我使用的组件库是ant design vue, 我主要使用的是Sortablejs 中的结束拖拽之后的onEnd 属性,因为是单表格的简单拖拽排序所以只用到了自带的参数对象evt的oldIndex和newIndex这两个属性,分别表示被拖拽的数据项拖拽前的下标和拖拽完成之后

    2024年02月11日
    浏览(51)
  • 连续两个南航的研究生面试出了从来没出现过的问题,本科和研究生都是计算机专业的,竟然说static是不可更改的。

    最近面试人数有点多,面试有点频繁,因此发现了一些学生普遍会发生的错误,可以说是很离谱。 因为做了十多年的面试官,无论是大中小厂的面试,还是社招、校招。 从来没有遇到过这样的情况,而且发生在两个南航研究生的身上。 今天就分析下这两个研究生面试中的错

    2023年04月13日
    浏览(84)
  • 20个不可错过的VScode神级插件

    VS Code 是我们打发时间时最常用的代码编辑器之一,它是一个多功能伴侣,重新定义了我们软件开发的方式。其轻量级的界面与强大的功能相结合,使其成为全球程序员的首选。但是,普通 VS Code 用户与熟练开发人员的区别在于通过扩展充分发挥其潜力的艺术。 在这篇文章中

    2024年02月09日
    浏览(37)
  • 竟然可以在一个项目中混用 Vue 和 React?

    React和Vue是前端开发中的两大热门框架,各自都有着强大的功能和丰富的生态系统。然而,你有没有想过,在一个项目中同时使用React和Vue?是的,你没有听错,可以在同一个项目中混用这两个框架!本文就来分享 3 个用于混合使用 React 和 Vue 的工具! Veaury 是一个基于 React

    2024年02月08日
    浏览(42)
  • draggable + grid 拖拽插件 + 网格布局 动态生成首页模版

    背景:         1、首页模板由多个子组件组成,如图表、新闻、公告、轮播图等,一般都由前端引入子组件,写在固定的位置上,最终形成一个固定的首页模板;         2、像这样直接在代码中写死的首页没有灵活性,不同用户想展示出来的首页模板千篇一律;        

    2024年02月01日
    浏览(38)
  • 解决Chrome浏览器安装Proxy-SwitchyOmega插件时“清单文件缺失或不可读取”错误

    为Chrome浏览器安装插件时,未能成功加载扩展程序,出现了“清单文件缺失或不可读取”错误,如图: 解决办法: 下载的Proxy-SwitchyOmega_v2.5.21.zip压缩包解压后,解压文件夹中会包含一个名为Proxy-SwitchyOmega_v2.5.21.crx的文件,将该文件扩展名直接改为.zip,然后解压缩。然后加载

    2024年01月21日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包