nil / v-drag Goto Github PK
View Code? Open in Web Editor NEWThe simplest way to integrate dragging on Vue.js
Home Page: https://v-drag.nilvila.com
License: MIT License
The simplest way to integrate dragging on Vue.js
Home Page: https://v-drag.nilvila.com
License: MIT License
Hi,
Just wondering if it's possible to dynamically disable v-drag?
The use-case is a component, which has a draggable
prop which either enables or disables v-drag on the component.
I looked setting the attribute dynamically, but couldn't make it to work properly.
Cheers!
@v-drag-start event doesn't work. @v-drag-down works instead.
Probably a bug in documentation or in file dragStart.js
vueDragEvent(moveElement, 'down');
Is it possible to limit the height of the drag area? I want to have a drawer that is 500px at bottom of screen. I want people to only drag within this parent container. Now it allows users to drag anywhere on the screen.
I have been using v-drag with nuxt js SPA.
plugins/drag.js
import Vue from "vue";
import drag from "v-drag";
Vue.use(drag);
But it says
Uncaught TypeError: window.data.move is undefined
default moveElementTransform.js:2
default dragEnd.js:16
default eventListener.js:4
default eventListener.js:3
default dragSetup.js:46
inserted index.js:36
VueJS 20
I have tried so many ways but still no help. At this point I'm just thinking to change the library itself but I find it so easy and lightweight. So here I am taking my chances to see if anyone can come up with a solution. Cheers !!
Suggest replacing the following code
Line 244 in cc6a1d6
into
const valueElement = el.querySelector(handle);
Clicking anywhere outside the dragable element before dragging causes:
On Firefox: TypeError: window.data.move is undefined
On Chrome: TypeError: Cannot read property 'style' of undefined
See: https://jsfiddle.net/wkv7rc6p/
Might be the same as issue #17.
Hi, this certainly is the simplest way to integrate dragging with VueJS :-) except I can't get it to work in IE :-( I am using Vue CLI 3 with Babel and Webpack.
Without making any changes, IE throws an error SCRIPT1006: Expected ')'
If I add v-drag to the transpileDependecies list, then it loads the app but when I try to access a component that has v-drag enabled, both Chrome and IE throw a [Vue warn]: Failed to resolve directive: drag
I tried forking the repository and fixing the default parameters in /src/utils/eventListener.js
as I think that may be the problem, but that didn't fix things either.
Any help appreciated!
We're using "@vue/cli-service": "^3.5.1", and we ran this command
npm run test:unit
And got this:
FAIL src/components/public/SubTierHeaders/DragSubTierHeader.spec.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/app/node_modules/v-drag/dist/main.js:5
function eventListener(a,t,e="add"){a.forEach(a=>{document[`${e}EventListener`](a,t)})}function returnPositionString(a,t,e){return`matrix(${a||"1, 0, 0, 1,"} ${t}, ${e})`}function updatePosition(a,t){window.data.relativeX=window.data.mouseX*a,window.data.relativeY=window.data.mouseY*t,window.data.move.style.transform=returnPositionString(window.data.matrix,window.data.matrixX+window.data.relativeX,window.data.matrixY+window.data.relativeY)}const callPositionUpdate={x(){updatePosition(!0,!1)},y(){updatePosition(!1,!0)},all(){updatePosition(!0,!0)}};function repeatRaf(){callPositionUpdate[window.data.axis](window.data),window.data.posAnimation=requestAnimationFrame(repeatRaf)}function setUpMovement(){window.data.move.classList.add(window.data.class.move),window.data.posAnimation=requestAnimationFrame(repeatRaf),eventListener(["mousemove","touchmove"],setUpMovement,"remove")}function getTransformValue(a,t){let e=Number(window.getComputedStyle(window.data.move)[t].replace
SyntaxError: Unexpected token export
2 | import Vuex from 'vuex'
3 | import BootstrapVue from 'bootstrap-vue'
> 4 | import vDrag from 'v-drag'
| ^
5 | import DragSubTierHeader from '@/components/public/SubTierHeaders/DragSubTierHeader.vue'
6 |
7 | const localVue = createLocalVue()
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/components/public/SubTierHeaders/DragSubTierHeader.spec.js:4:1)
Our codes:
<template>
<b-button
v-drag
:style="style"
@mouseup="updatePositions($event)"
>
{{ details.name }}
</b-button>
</template>
<script>
import SubTierHeader from './SubTierHeader'
import Vue from 'vue'
import vDrag from 'v-drag'
Vue.use(vDrag)
export default {
name: 'SubTierHeader',
extends: SubTierHeader,
computed: {...},
},
methods: {...},
}
</style>
Hi @nil , thanks for making v-drag
, and for sharing it on github! :)
I'm using it to drag some SVG rectangles around. This was my first attempt:
<svg width="640" height="480" style="background:#eee;">
<rect v-drag="{axis:'all'}" x="10" y="20" width="50" height="30" style="display:block"/>
</svg>
Immediately out of the box, I'm able to drag the rectangle Awesome!
Unfortunately, once I release the mouse, it snaps back to its original position, presumably because the x
and y
attributes on the element itself supersede the CSS positioning.
So far, I've managed to work around this with the following:
<script setup lang="ts">
import { ref } from 'vue'
const rects = ref([
{x:10, y:20, w:50, h:30, bg:'tomato'},
{x:10, y:80, w:50, h:30, bg:'gold'},
{x:10, y:140, w:50, h:30, bg:'dodgerblue'} ]);
function onDragRectEnd(r) {
let d = window.data, s = d.move.style
r.x += d.relativeX; r.y += d.relativeY
s.left = s.top = 0; s.transform = 'none'
d.move = null // otherwise dragging anywhere will cause last rectangle to move
}
</script>
<template>
<svg width="640" height="480" style="background:#eee;">
<!-- without the `style` below, the rect doesn't move until the end of the first drag -->
<rect v-for="r in rects" v-drag="{axis:'all'}" @v-drag-end="onDragRectEnd(r)"
style="left:0; top:0; transform:none"
:x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.bg" />
</svg>
</template>
This works, but is basically undoing the initial work that v-drag did, which seems a little wrong:
This doesn't really generalize to other SVG elements (<circle/>
and <ellipse/>
both use cx
and cy
attributes, for example, and others rely on the general transform
attribute).
Also, I haven't yet accounted for what might happen when dragging something inside a transformed container.
I'm somewhat tempted to make this a feature request for finer control over how the "drop" coordinates get baked into the element, but maybe just adding some documentation with advice for SVG would work just as well.
What do you think?
Is it possible to import directive to individual component in the way shown below?
import ??? from "v-drag";
export default defineComponent({
directives:{???},
})
The use case are nested components distributes as Custom Elements (Web Components), where app.use() is not working. All imports must be done in the component itself.
https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
Thanks!
When you drag an element with the v-drag
attribute everything works fine until the cursor (not the element) touches the left side or top side of the document. When that happens, the following exception is raised:
When the cursor is touching the top (or beyond it), dragging does continue to work, but when the cursor is touching the left side, the position of the element stops updating until the cursor moves back into the document.
I would guess that the fault lies within these lines:
v-drag/src/utils/updateMousePosition.js
Lines 4 to 6 in 92d52d0
Where e.touches
is undefined.
I would like to have a prop to snap the v-drag element on the screen border, so people can't move the element out of the screen.
The recent update, where the dist
-directories were removed from version control, broke usage of v-drag
, because package.json
is still pointing to the dist
-directories.
This leads to a hard to debug error message, such as:
ERROR Failed to compile with 1 errors1:18:18 PM
This dependency was not found:
* v-drag in ./src/app.js
To install it, you can run: npm install --save v-drag
I would suggest that you either run the build steps and add the dist
-directory back to git.
Is there a way to restrict the draggable area, to a specific div?
It seems like this repo is dead. Ive forked this repo and merged the changes #45 into it yo yall can use them.
Repo link: https://github.com/oakyydev/v-drag
After adding v-drag to an element we seem to be getting the following error before clicking the element. After clicking the error disappears.
Uncaught TypeError: Cannot read property 'style' of undefined
at moveElementTransform.js:2
at HTMLDocument.<anonymous> (dragEnd.js:16)
Out setup is fairly simple:
// app.js
import drag from 'v-drag/src/index';
[...]
Vue.use(drag);
// in a component
<div v-drag>Drag me!</div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.