1.0.1 • Published 6 years ago
vue-dragdrop-directive v1.0.1
vue-dragdrop-directive
Installation
# will publish after 2018-08-15 15:00
npm install vue-dragdrop-directive
register in .js file:
import vueDragDrop from "vue-dragdrop-directive";
Vue.use(vueDragDrop);
Typical use
Movement
<!--
v-drag-drop run in delegate mode by default.
all of elements which has draggable="true" can be fire drag event under the v-drag-drop.
-->
<template>
<div v-drag-drop class="container">
<div draggable="true" class="draggable"></div>
</div>
</template>
<style>
.container {
width: 800px;
height: 800px;
}
.draggable {
/* v-dragdrop is a basic lib, you must write absolute your self*/
position: absolute;
width: 100px;
height: 100px;
background-color: dodgerblue;
}
</style>
Resize
<template>
<div v-drag-drop="{handler:resizeHandler}" class="container">
<div class="resizable">
<!-- in this case draggable attribute set to a resize handler. -->
<div draggable="true" class="resizer"></div>
</div>
</div>
</template>
<script>
export default {
/**
* key point, v-drag-drop can set a props named "handler",
* in this case handler is a function, when it is a function, it will be called on drag
*
* @param el the dom element which on drag.
* @param container the dom element which mouse over in the container.
* @param distX the horizontal distance of mouse movement.
* @param distY the vertical distance of mouse movement.
* @param e the dom event object of "ondragover"
*/
resizeHandler(el, container, distX, distY, e) {
const style = el.parentNode.style;
style.width = parseInt(style.width) + distX + "px";
style.height = parseInt(style.height) + distY + "px";
// you also can change scroll position like following code:
// const parent = el.parentNode;
// parent.scrollTo(parent.scrollLeft - distX, parent.scrollTop - distY);
}
}
</script>
<style>
.container {
width: 800px;
height: 800px;
}
.resizable {
/* v-dragdrop is a basic lib, you must write absolute your self*/
position: absolute;
width: 100px;
height: 100px;
background-color: dodgerblue;
}
.resizer {
cursor: se-resize;
width: 11px;
height: 11px;
position: absolute;
background-color: yellow;
font-size: 0.1px;
display: block;
z-index: 90;
right: 0;
bottom: 0;
}
</style>
Props
v-dragdrop support the following props:
allowOver (default is true)
when it is false, the dom can not be listen ondragover event on the dom.
handler (default is undefined)
handler is an extensibility, it can be write in three forms:
Function
when it is a function, it will be called on drag.
Object
coming soon.
when it is a object, it will be contains two functions like following, requires at least one .
{ onDrag(currentDragElement, container, distX, distY, e) { // call on drag. }, onDrop(currentDragElement, e) { // call on drop. } }
Array
when it is a array, the element must be a object which contains three functions like following:
{ match(currentDragElement) { // is required in array mode. // decide if onDrag/onDrop can be called for this element(currentDragElement) }, onDrag(currentDragElement, container, distX, distY, e) { // call on drag. }, onDrop(currentDragElement, e) { // call on drop. } }