vue-drag-it-dude

Vue2 component, that allows you to drag object wherever you want.

View demo Download Source

What this can do

  • Drag and drop DOM elements inside parent (or document, if parent's size not specified)
  • Receive content sizes and update move restrictions
  • Move with mouse, or with touch, it's not matter
  • Emit active and drag events

Install

via NPM

npm install vue-drag-it-dude --save

Usage

import DragItDude from 'vue-drag-it-dude';

export default {
  name: 'App',
  components: {
    DragItDude
  },
}

or

import Vue from 'vue'
import DragItDude from 'vue-drag-it-dude'

Vue.component('vue-drag-it-dude', DragItDude)

Don't forget to add position: relative; for parent element!

Now use it!

<template>
  <div id="app" class="parentElement">
    <drag-it-dude
      @activated="handleActivated"
      @dragging="handleDragging"
      @dropped="handleDropped"
    >
      <div class="innerElement">{{ text }}</div>
    </drag-it-dude>
  </div>
</template>

<script>
import DragItDude from "vue-drag-it-dude";

export default {
  name: "App",
  components: {
    DragItDude
  },
  data: () => ({
    text: "Just move me!",
  }),
  methods: {
    handleActivated() {
      this.text = "I am ready for great things!";
    },
    handleDragging() {
      this.text = "Weeee!";
    },
    handleDropped() {
      this.text = "That's place is awesome!";
      setTimeout(() => {
        this.text = "Just move me!";
      }, 3000);
    }
  }
};
</script>

<style>
  .parentElement {
    position: relative;
  }
</style>

Props

width

type: Number

Required: false

Default: 0

If you want to dynamically change inner DOM element width, just type something like:

<drag-it-dude :width="40"></drag-it-dude>
height

type: Number

Required: false

Default: 0

If you want to dynamically change inner DOM element height, just type something like:

<drag-it-dude :height="40"></drag-it-dude>
parentWidth

type: Number

Required: false

Default: parentNode.offsetWidth of draggable element

If you want to limit width of area, within which an element can move:

<drag-it-dude :parent-width="500"></drag-it-dude>
parentHeight

type: Number

Required: false

Default: parentNode.offsetHeightof draggable element

If you want to limit height of area, within which an element can move:

<drag-it-dude :parent-height="500"></drag-it-dude>

Events

activated

Required: false

Called, when element is activated

<drag-it-dude @activated="someFunction"></drag-it-dude>
dragging

Required: false

Called, when element is draggeing

<drag-it-dude @dragging="someAnotherFunction"></drag-it-dude>
dropped

Required: false

Called, when element release

<drag-it-dude @dropped="someOtherFunction"></drag-it-dude>

GitHub