mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
70 lines
3.2 KiB
Vue
70 lines
3.2 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="parent">
|
|
<Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[1].x" v-model:y="draggables[1].y" v-model:w="draggables[1].w" v-model:h="draggables[1].h"
|
|
v-model:active="draggables[1].active" :draggable="draggables[1].draggable" :resizable="draggables[1].resizable" @activated="print('activated')"
|
|
@deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
|
|
@dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
|
|
@resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 1 )">
|
|
<p v-if="draggables[1].draggable">This is a test example</p>
|
|
<input @keydown.esc="disableEditMode()" value="This is a test example" v-else/>
|
|
</Vue3DraggableResizable>
|
|
<Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[2].x" v-model:y="draggables[2].y" v-model:w="draggables[2].w" v-model:h="draggables[2].h"
|
|
v-model:active="draggables[2].active" :draggable="draggables[2].draggable" :resizable="draggables[2].resizable" @activated="print('activated')"
|
|
@deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
|
|
@dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
|
|
@resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 2 )">
|
|
<p v-if="draggables[2].draggable">This is a test example (2)</p>
|
|
<input @keydown.esc="disableEditMode()" value="This is a test example (2)" v-else/>
|
|
</Vue3DraggableResizable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue3DraggableResizable from 'vue3-draggable-resizable';
|
|
//default styles
|
|
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
|
|
export default {
|
|
components: { Vue3DraggableResizable },
|
|
data() {
|
|
return {
|
|
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true }, 2: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true } },
|
|
x: 100,
|
|
y: 100,
|
|
h: 100,
|
|
w: 100,
|
|
active: false
|
|
}
|
|
},
|
|
methods: {
|
|
print(val) {
|
|
console.log(val)
|
|
},
|
|
enableEditMode ( obj ) {
|
|
this.draggables[ obj ].draggable = false;
|
|
this.draggables[ obj ].resizable = false;
|
|
},
|
|
handleKeyboard ( key ) {
|
|
console.log( key );
|
|
},
|
|
disableEditMode () {
|
|
for ( let draggable in this.draggables ) {
|
|
this.draggables[ draggable ].draggable = true;
|
|
this.draggables[ draggable ].resizable = true;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.parent {
|
|
width: 200px;
|
|
height: 200px;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 100px;
|
|
border: 1px solid #000;
|
|
user-select: none;
|
|
}
|
|
</style> |