npm i --save vue-draggable-resizable
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
Vue.component('vue-draggable-resizable',VueDraggableResizable)
<template>
<div id="app" style='width:1300px;height:800px;border:5px solid #000;background-color: aqua; '>
<vue-draggable-resizable :draggable="draggable" :resizable="resizable" @dragstop="onDragStop" @resizestop="onResizeStop" :drag-cancel="'.drag-cancel'" :w='w' :h='h' @resizing='onResize'
:parent="true" @dragging='onDrag' :isConflictCheck="true"
:snap="true"
:snapTolerance="10" class-name-handle="my-handle-class"
class-name-dragging="my-dragging-class" class-name-resizing="my-resizing-class" class-name="my-class">
<div class='outDiv'>
11<helloworld></helloworld>
</div>
</vue-draggable-resizable>
<vue-draggable-resizable :draggable="draggable" :resizable="resizable" @dragstop="onDragStop" @resizestop="onResizeStop" :drag-cancel="'.drag-cancel'" :w='w' :h='h' @resizing='onResize'
:parent="true" @dragging='onDrag' :isConflictCheck="true"
:snap="true"
:snapTolerance="10" class-name-handle="my-handle-class"
class-name-dragging="my-dragging-class" class-name-resizing="my-resizing-class" class-name="my-class">
<div class='outDiv'>
22<helloworld></helloworld>
</div>
</vue-draggable-resizable>
<p>x:{{x}}</p>
<p>y:{{y}}</p>
<p>w:{{w}}</p>
<p>h:{{h}}</p>
</div>
</template>
<script>
import helloworld from './components/HelloWorld.vue'
export default {
components: {
helloworld
},
name: 'App',
data() {
return {
resizable:true,
draggable:true,
x: 0,
y: 0,
w: 100,
h: 100
}
},
methods: {
onResizeStop() {
console.log('onResizeStop')
},
onDragStop() {
console.log('onDragStop')
},
onResize(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
},
onDrag(x, y) {
this.x = x;
this.y = y;
}
}
}
</script>
<style>
.my-handle-class {
position: absolute;
background-color: #0099ff;
border-radius: 50%;
height: 8px;
width: 8px;
box-model: border-box;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.my-handle-class-tl {
top: -5px;
left: -5px;
cursor: nw-resize;
}
.my-handle-class-tm {
top: -5px;
left: 50%;
margin-left: -7px;
cursor: n-resize;
}
.my-handle-class-tr {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.my-handle-class-ml {
top: 50%;
margin-top: -7px;
left: -5px;
cursor: w-resize;
}
.my-handle-class-mr {
top: 50%;
margin-top: -7px;
right: -5px;
cursor: e-resize;
}
.my-handle-class-bl {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.my-handle-class-bm {
bottom: -5px;
left: 50%;
margin-left: -7px;
cursor: s-resize;
}
.my-handle-class-br {
bottom: -5px;
right: -5px;
cursor: se-resize;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
* {
margin: 0;
padding: 0;
}
.my-class>div.outDiv:hover{
background: rgba(255,255,255,.5);
}
.my-class>div.outDiv{
width:100%;height:100%;overflow: hidden;
}
.my-class.active{
background: rgba(255,255,255,.5);
}
.my-resizing-class {
background: rgba(255,255,255,.5);
border: 1px solid black;
color: white;
}
.my-dragging-class {
opacity: .5;
}
</style>