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
Vue Directive to allow dragging elements or components. Uses displacejs under the hood
⚙️ Installation
$ npm install vue-displace
📄 Documents
🚀 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.