Package Exports

vue-displace

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-displace) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-displace

branches releases openIssues lastCommit license

Vue Directive to allow dragging elements or components. Uses displacejs under the hood

⚙️ Installation

$ npm install vue-displace

📄 Documents

displacejs

🚀 How to use in Vue

In main.js

import displace from "vue-displace";

Vue.use(displace)

<template>
  <div id="app">
        <div :id="55" v-displace @onMouseDown="log" @onMouseMove="log" @onMouseUp="log" class="item">
      im a div please drag me
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    log(e) {
      console.log(e);
    }
  }
};
</script>

<style>
.item {
  width: 200px;
  height: 200px;
  background: red;
}
</style>

Events emitted: onMouseDown onMouseMove onMouseUp onTouchStart onTouchMove onToughStop

customMove and ignoreFn are passed as follows:

v-displace="{customMove:someMethodHere, ignoreFn:someOtherMethodHere}"

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to vue-displace or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

⚙️ Development

`npm run serve`

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.