安装：

npm install --save vue-draggable-resizable

使用：

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-draggable-resizable>
  </div>
</template>
 
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
 
export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components:{VueDraggableResizable },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

demo:

https://mauricius.github.io/vue-draggable-resizable/

参数：

1.active--是否激活

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :active="true">

2.draggable--是否可拖拽

Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :draggable="false">
3.resizable--是否可缩放

Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :resizable="false">
4.w--初始宽度

Type: Number
Required: false
Default: 200

<vue-draggable-resizable :w="200">
5.h--初始高度

Type: Number
Required: false
Default: 200

<vue-draggable-resizable :h="200">
6.minw--最小宽度

Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minw="50">
7.minh--最小高度

Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minh="50">
8.x--初始位移x

Type: Number
Required: false
Default: 0

<vue-draggable-resizable :x="0">
9.y-初始位移y

Type: Number
Required: false
Default: 0

<vue-draggable-resizable :y="0">
10.z--显示层级

Type: Number|String
Required: false
Default: auto

<vue-draggable-resizable :z="999">
11.handles--控制区域

Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

  • tl - Top left
  • tm - Top middle
  • tr - Top right
  • mr - Middle right
  • br - Bottom right
  • bm - Bottom middle
  • bl - Bottom left
  • ml - Middle left
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
12：axis--设置拖拽方向（x,y,both）

Type: String
Required: false
Default: both

<vue-draggable-resizable axis="x">
13:
grid--网格移动

Type: Array
Required: false
Default: [1,1]

<vue-draggable-resizable :grid="[1,1]">
14：
parent--限制在父元素内移动

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :parent="true">
15：dragHandle--定义拖拽元素

Type: String
Required: false

<vue-draggable-resizable drag-handle=".drag">
16：
dragCancel--Defines a selector that should be used to prevent drag initialization.

Type: String
Required: false

<vue-draggable-resizable drag-cancel=".drag">
17：
maximize--If set to true allows the component to fill its parent when double-clicked.

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :maximize="true">

事件：

1.activated

Required: false
Parameters: -

Called whenever the component gets clicked, in order to show handles.

<vue-draggable-resizable @activated="onActivated">
2.deactivated

Required: false
Parameters: -

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

<vue-draggable-resizable @deactivated="onDeactivated">
3.resizing

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component gets resized.

<vue-draggable-resizable @resizing="onResizing">
4.resizestop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element
  • width the width of the element
  • height the height of the element

Called whenever the component stops getting resized.

<vue-draggable-resizable @resizestop="onResizstop">
5.dragging

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component gets dragged.

<vue-draggable-resizable @dragging="onDragging">
6.dragstop

Required: false
Parameters:

  • left the X position of the element
  • top the Y position of the element

Called whenever the component stops getting dragged.

<vue-draggable-resizable @dragstop="onDragstop">

引用：https://www.npmjs.com/package/vue-draggable-resizable#demo

 

转载于:https://www.cnblogs.com/yycc11/p/9565915.html

# javascript
GitHub 加速计划 / vu / Vue.Draggable
4
1
下载
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件，提供了拖放排序功能，可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支：4 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区