Top Vue Packages for Adding Drag and Drop and Watching Resizing

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how the best packages for adding drag and drop and watching elements resizing to our Vue app.

VueDraggableResizable

VueDraggableResizable is an easy to use the package to let us make comments draggable and resizable.

To use it, we install it by running:

npm i vue-draggable-resizable

Then we can use it by writing:

import Vue from "vue";
import App from "./App.vue";
import VueDraggableResizable from "vue-draggable-resizable";

import "vue-draggable-resizable/dist/VueDraggableResizable.css";

Vue.component("vue-draggable-resizable", VueDraggableResizable);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

to register the component and add the styles.

Then in our component, we write:

<template>
  <div id="app">
    <div id="draggable">
      <vue-draggable-resizable
        :w="100"
        :h="100"
        [@dragging](http://twitter.com/dragging "Twitter profile for @dragging")="onDrag"
        [@resizing](http://twitter.com/resizing "Twitter profile for @resizing")="onResize"
        :parent="true"
      >
        <p>drag me ({{x}},{{y}})</p>
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    };
  },
  methods: {
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>

<style>
#draggable {
  height: 500px;
  width: 500px;
  position: relative;
}
</style>

We have a 500px by 500px div that we can drag and resize thanks to the vue-draggable-resizable component.

The x and y coordinates change and can be listened to with the onDrag handler, which has the latest coordinates in the parameters.

Likewise, we can do the same for resize:

<template>
  <div id="app">
    <div id="draggable">
      <vue-draggable-resizable
        :w="100"
        :h="100"
        [@dragging](http://twitter.com/dragging "Twitter profile for @dragging")="onDrag"
        [@resizing](http://twitter.com/resizing "Twitter profile for @resizing")="onResize"
        :parent="true"
      >
        <p>drag me ({{x}},{{y}})</p>
        <p>size ({{width}}x{{height}})</p>
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    };
  },
  methods: {
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>

<style>
#draggable {
  height: 500px;
  width: 500px;
  position: relative;
}
</style>

The onResize method for the coordinates and the size.

Props

It comes with other props like class-name to set the class name.

class-name-draggable to add styles with draggable is enabled.

class-name-resizable lets us style the element when it’s resized.

class-name-resizing lets us add styles when it’s resizing.

class-name-handle styles the handles.

disable-user-select lets us disable user to select.

There are many other props that we can use to style and handle events.

The initial x and y coordinates can also be set with the props of the same name.

vue-resize

We can watch elements being resized with the vue-resize package.

To use it, we install it by running:

npm i vue-resize

Then we register the component by adding:

import Vue from "vue";
import App from "./App.vue";
import "vue-resize/dist/vue-resize.css";
import VueResize from "vue-resize";

Vue.use(VueResize);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

It comes with styles and the resize-observer component.

Then in our component, we add:

<template>
  <div class="demo">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu facilisis lorem. In arcu nisl, vulputate id diam eget, ultricies aliquet neque. Phasellus sapien lacus, consectetur ut nisi quis, mattis tincidunt ante. Aliquam ultrices nisl ornare augue laoreet, a vehicula libero consequat. Sed aliquam aliquet turpis, ut sodales elit sodales sit amet. Donec ullamcorper velit neque, in maximus odio tempus eu. Praesent ullamcorper, nibh sodales maximus feugiat, erat tellus condimentum sem, ac convallis tellus diam suscipit tellus. Proin egestas tellus neque. Vestibulum porttitor tempus tellus sit amet volutpat. Sed urna nibh, molestie non pulvinar in, accumsan nec nisl.</p>
    <resize-observer @notify="handleResize"/>
  </div>
</template>

<script>
export default {
  methods: {
    handleResize({ width, height }) {
      console.log("resized", width, height);
    }
  }
};
</script>

<style scoped>
.demo {
  position: relative;
}
</style>

We set the notify handler to handleResize to watch for size changes.

The width and height are in the handler for us to use.

Conclusion

We can use the vue-draggable-resizable package to let us create elements that are draggable and resizable.

The vue-resize package lets us watch for elements being resized.