vue 图片拖拽组件

2024-08-24

vue组件实现图片的拖拽和缩放

vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是组件应遵循单向数据流的原则. 在实现我的图片的拖拽组件我们的搞清其原理,在这里我使用的是mousedown,mousemove和mouseup来实现拖拽.如图所示: 1.新建ElementDrag.vue文件内容如下: <template> <div class="drag-out

Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件.安利一下~ Vue Smooth DnD 是一个快速.轻量级的拖放.可排序的 Vue.js 库,封装了 smooth-dnd 库. Vue Smooth DnD 主要包含了两个组件,Container 和 Draggable,Container 包含可拖动的元素或组件,它的每一个子元

vue实现拖拽组件

可以拖拽,靠边停靠,效果图如下代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" id="moveDiv" @mousedown="start($event)" @touchstart="start($event)" @mousemove="move($event)" @touchmove="move

vue 图片拖拽和滚轮缩放

这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap"> <img ref="img" :src="fullscreenImgSrc" @mousedown

vue列表拖拽组件 vue-dragging

安装 $ npm install awe-dnd --save 应用在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueDND) vue文件中引用 <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Hotpink" }, { text: "Gol

Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一个办法就是通过index根据列表索引添加背景问题:拖拽是可以换动顺序的,所以不管我怎么拖动,背景的顺序并不不会变. 2 - 第二个办法是,通过动态给列表绑定ID,通过id来添加背景,这总没问题了吧问题: 很奇怪的问题,我现在也没有理解,换动顺序以后,查看HTML元素,确实id是根据顺序变换了的,

vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放,果断放弃,最后选用了腾讯的AlloyTeam团队的开源的手势库AlloyFinger,闲话少说直接上代码 1.下载 npm install alloyfinger 2.main.js全局配置 import AlloyFinger from 'alloyfinger' import AlloyFing

vue拖拽组件开发

vue拖拽组件开发创建临时vue项目先查看node和npm版本,怎么安装就不多多bb了再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安装成功 vue list 创建项目 vue init webpack "项目名称" 下面懒得介绍了,直接用小姐姐一张图,通道=>程序员是粉色的开始写拖拽组件组件就暂且命名为 JuDrag吧.然后再在index.vue里面引入,代码如下: <template> <

Vue富文本编辑器（图片拖拽缩放）

富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器.经过多次尝试,最终选择了wangEditor富文本编辑器. 最初使用的是vue2Editor富文本编辑器,vue2Editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助Qill.js来实现图片拖拽.虽然满足了业务需求,但是在移动端展示的效果不

vue自由拖拽、缩放组件

github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <template> <div> <VueDragResize :isActive="true" :isResizable="false" > <img src="../assets/logo.png" v-drag hei

vue-slicksort拖拽组件

vue-slicksort拖拽组件安装通过npm安装 $ npm install vue-slicksort --save 通过yarn安装 $ yarn add vue-slicksort 插件应用引入组件 // Using an ES6 transpiler like Babel import {ContainerMixin, ElementMixin} from 'vue-slicksort'; // Not using an ES6 transpiler var slicksort

Vue-Grid-Layout分享一款好用的可拖拽组件

在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid layout的字眼,然后尝试去搜了下有没有这方面的组件,一搜果然是有这样的组件的.首先看到的是react版本的组件,然后搜了下也有vue相关的. 以前也见过jquery的可拖拽组件demo,但是整体上感觉不如grid-layout优秀. [] VUE Grid Layout. []React Gr

React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

仓库地址:Dragact手感丝滑的拖拽布局组件预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dragact. 纵向堆叠着314个方块,插入时明显的卡顿,大约1秒的延迟同样纵向堆叠着314个方块,插入时卡顿明显减少很多,可以接受在实际生产过程中,可能不会有那么多物块,就拿我们项目的dashboard来说,整个屏幕最多只有10个方块,就已经是了不起了. 但是强迫症犯了,为了使得性能达到极致,再

Vue实现拖拽穿梭框功能四种方式

一.使用原生js实现拖拽点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position: absolute; line-height: 100px; text-align: cente

canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

引言在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需要用到一对canvas方法,在变换坐标系前保存canvas状态,在变换并绘制完成之后,恢复canvas状态,即save()和restore(). [备注] 这篇文章只是记录分享下解决问题的过程,找我要demo的,或者问我什么东西怎么做的,就不要加我了.你可以加一个canvas相关的交流群,或者如果需

canvas 图片拖拽旋转之一——坐标转换translate

引言对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转,而视觉感受上的坐标以及鼠标事件中的坐标都是旋转之前的屏幕坐标系.再根据鼠标的移动去控制canvas中的图片时,就会出现问题. 用A坐标系中的偏移来控制B坐标系中的图形,就需要进行一个坐标转换,即通过一种转换关系,将A坐标系中的点在B坐标系中表示出来,然后根据B坐标系中的偏移来控制B坐标系中的图形.

HTML5图片拖拽预览原理及实现

一.前言这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会附上我们的源码.在 HTML5 之前我们做图片预览主流做法有两种,第一种是通过 Flash 插件来做预览,第二种是 Ajax 实现的假预览,也就是说选择图片文件后,图片其实已经异步上传到服务器,服务器处理后返回图片路径,前端得到响应结果做出处理从而使图片显示在界面上.而有了 HTML5 之后就可以强

HTML5多图片拖拽上传带进度条

前言昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

强大的拖拽组件：React DnD 的使用

强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接学习 React DnD 的最初原因是阅读<如何写一个拖拽日历组件>附的源码时,看不懂拖拽组件 React DnD 的相关代码,于是行动力极强地学习了React DnD这个组件. 本文会通过在根组件(Contaier.jsx)展示将垃圾(Box.jsx)扔进垃圾桶(Dustbin.jsx)的例子,解释如何使用React DnD最基本的拖

自制一个H5图片拖拽、裁剪插件（原生JS）

前言如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图片拖拽.裁剪的插件.其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery.索性自己搞一个轻量的,只是不支持缩放功能. DEMO(手机上看效果比较好,PC上没有兼容处理),原码实现这里简略说下实现过程,只截取部分代码片段,有兴趣的可以看下原码,反正也很简单. 图片上传

Android 仿微信朋友圈发表图片拖拽和删除功能

朋友圈实现原理我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Monitor,选择DDMS,连接上真机,区域2 就会显示出当前手机正在运行的应用,再点击区域1,然后新窗口就会显示出当前页面分析的结果,点击区域3 中的相应控件,区域4 中就会选中对应的控件.区域4 中以菜单的层级关系显示出各控件的关系. 区域4中各参数意义: eg:(0)FrameLayout[

vue 图片拖拽组件

热门专题