Skip to content
vue-drag-element
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
component
src
.gitinnore
.npmignore
LICENSE
README.md
package.json

README.md

vue-drag-element

Environment

This plugin is run in Vue2.

Platform

Not only mobile but also web are work perfectly.

Usage

Import component in your project, then write another a little bit code like below the component will work.

Option

Option is an Object. you can set some setting via option.

value defalut value descrition
position { right:12, bottom: 12 } set element position, position is an Object , if position is not set or empty, then the default value will be {right: 12, bottom: 12}, here are avaliable attributes [top|right|bottom|right]
edgeSpace [0,0,0,0] edge space to retain

Although there are four attributes can be used in position object, but actually two attribute is enough, top with left, top with right, or bottom with left , bottom with right. position object just to set drag element position in the web page.

Notice: when you set position, you must give two attribute with value to position at the same time.

Event

There are three events can be used. all you have to do is just add the event listener to the component, three event callbacks all return a point coordinate object.

Notice: transform(change translate) way and traditional way (change left、right、bottom or top) coordinate info sinnificance is different, because they work in different way (transform or position), and this result in different sinnificance data to return.

attribute type descrition
start event start event trigger
move event move event trigger
end event end event trigger

Here is an example, pithy code and easy to use.

In template

<vue-drag-element :options="options" @start="start" @move="move" @end="end">
   <!-- here insert you element -->
   <div class="ball"></div>
</vue-drag-element>

In script

import VueDragElement from 'vue-drag-element'
export default {
  components:{ VueDragElement },
  ......
  data() {
    return {
      options: {
         position: {
           right:12,
           top:12
        }
      }
    };
  },
  methods: {
    start(point) {
      console.log(point)
    },
    move(point) {
      console.log(point)
    },
    end(point) {
      console.log(point)
    }
  }
......
}

中文文档:http://yunkus.com/

You can’t perform that action at this time.