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 height="100px" width="100px" />
</VueDragResize>
</div>
</template> <style>
.vdr.active:before{
outline: none
}
</style> <script>
import VueDragResize from "vue-drag-resize";
export default {
components: {
VueDragResize
},
data() {
return {};
},
methods: {},
mounted() { }
};
</script>
:isResizable="false":不支持缩放,只支持拖拽
outline: none:去除拖拽组件的边框
vue自由拖拽、缩放组件的更多相关文章
- vue的拖拽vuedraggable组件使用方法
<template> <div id="app"> <vuedraggable class="wrapper" ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- jquery插件-自由拖拽
最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
- React造轮子:拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
- div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- vue内容拖拽放大缩小
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用)
目录 go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用) warden direct demo-server gr ...
- 基于事件的网关 Eventbased Gateway
基于事件的网关 Eventbased Gateway 作者:Jesai 时间:2018年4月21日 21:19:30 什么是事件网关? 基于事件的网关,允许基于事件做选择. 事件网关的执行原理? 网 ...
- java常量 数据类型
一.常量 概念:程序运行期间,内容不发生改变的量 1.字符串常量 双引号 2.整数常量 3.浮点数常量 4.字符常量 单引号 一个字符 必须要有一个字符 不能为空 5.布尔常量 true false ...
- git 查看修改账号密码
git config user.name 查看用户名 git config user.email 查看用户邮箱 修改用户名和邮箱的命令 git config --glo ...
- php变量中两种特殊类型
第一种----资源 资源(resource):资源是由专门的函数来建立和使用的,例如打开文件.数据连接.图形画布.我们可以对资源进行操作(创建.使用和释放).任何资源,在不需要的时候应该被及时释放.如 ...
- 趣学CCNA 路由与交换
第1章 OSI和TCP/IP 11.1 协议与协议分层 31.2 OSI参考模型 61.2.1 物理层 91.2.2 数据链路层 91.2.3 网络层 101.2.4 传输层 101.2.5 会话层 ...
- GitHub 上这几个沙雕项目,够我玩几天
在家里都憋坏了吧?每天睡了吃吃了睡,该找点事做做了,今天推荐几个好(沙)玩(雕)的开源项目,好在家打发时间. 91 吴先生 一个在线的 PornHub 风格 Logo 生成工具 Logoly.Pro ...
- CTF--HTTP服务--SQL注入POST参数-注入HTTP报文
开门见山 1. 扫描靶机 2. 对靶机开放端口进行扫描 3. 扫描全部信息 4. 用nikto -host 探测敏感信息 5. 用dirb探测敏感目录 6. 打开一些目录探测出的网页进行查看 7. 再 ...
- Git详解之分支使用
前言 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的完整副本 ...
- C# 解析JSON遇到以错误提示:应为状态“Element”。。遇到名称为“”、命名空间为“”的“Text”。
话不多说:仔细看代码: ①json格式错误导致报错 {"TeachIQ":" 语言 0小时0分钟 未完成","Temperature" ...