Resize does not work? - Githubissues

iwasherefirst2 commented 3 years ago

This is my js:

import Vue from 'vue'
import VueDraggableResizable from './components/DragResize2'

// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('nie-draggable-resizable', VueDraggableResizable)

const app = new Vue({
    el: '#main-content'
});

This is my VUE file:

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="200" :h="100" @dragging="onDrag" @resizing="onResize" :resizable="true" :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
    }
  },
  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>

Thats my HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" defer></script>
    <script type="text/javascript" src="{{ URL::asset('js/pdfEditor.js') }}" defer></script>
</head>
<body>
<div id="main-content">
<nie-draggable-resizable></nie-draggable-resizable>

</div>
</body>
</html>

I can drag the text in the red box. But how can I resize it?

TitanFighter commented 3 years ago

Show your code on https://codesandbox.io/

iwasherefirst2 commented 3 years ago

The css was not imported, because I extract css in an extra file with webpack, I forgot it about it. Without the css, there are no boxes to resize.

mauricius / vue-draggable-resizable

Resize does not work? #293