<template>
<div style="position:relative;height:400px;"
@mousedown="handleMouseDown">
<div class="avue-grid"></div>
<avue-draggable :width="obj.width"
:height="obj.height"
:left="obj.left"
:top="obj.top"
id="draggable"
ref="draggable"
@focus="handleFocus"
@blur="handleBlur">
<div style="width:200px;height:200px;background:red">
</div>
</avue-draggable>
<avue-draggable :width="obj1.width"
:height="obj1.height"
:left="obj1.left"
:top="obj1.top"
id="draggable1"
ref="draggable1"
@focus="handleFocus"
@blur="handleBlur">
<div style="width:200px;height:200px;background:green">
</div>
</avue-draggable>
<avue-draggable lock
:width="obj2.width"
:height="obj2.height"
:left="obj2.left"
:top="obj2.top"
id="draggable2"
ref="draggable2"
@focus="handleFocus"
@blur="handleBlur">
<div style="width:200px;height:200px;background:yellow">
</div>
</avue-draggable>
</div>
</template>
<script>
export default {
data () {
return {
obj: {
width: 100,
height: 100,
left: 100,
top: 100
},
obj1: {
width: 200,
height: 200,
left: 300,
top: 200
},
obj2: {
width: 100,
height: 100,
left: 500,
top: 200
}
}
},
methods: {
handleMouseDown () {
this.$refs.draggable1.setActive(false);
},
handleFocus ({ index, left, top, width, height }) {
console.log(index, left, top, width, height)
},
handleBlur ({ index, left, top, width, height }) {
console.log(index, left, top, width, height)
},
}
}
</script>