probil / vue-moveable Goto Github PK
View Code? Open in Web Editor NEW↔️ ↕️ 🔄 Vue.js wrapper for Moveable
Home Page: https://vue-moveable.netlify.com/
License: MIT License
↔️ ↕️ 🔄 Vue.js wrapper for Moveable
Home Page: https://vue-moveable.netlify.com/
License: MIT License
daybrush/moveable have released 0.15.2, could you upgrade to that release. Thank you so much.
I would like to bind height and width to moveable component, because then moveable-control-box will be that width and height too.
However, when i use :width="el.width" on my it does not render; data attributes does not render too.
How to add style to component? It can not be in <style> tag, because it is dynamic and different, depending on element values.
@probil How to handle bounds, I want my moveable object can't get out of the parent container, is that possible ?
I just updated to 1.8.2 version of this plugin and I cannot set values for my state;
I removed additional moveable instance from this.$refs.moveable.setState(); but it still do not work.
I have got something like this in mounted function:
this.$refs.moveable.setState(() => {
this.moveable.scalable = true;
this.moveable.resizable = false;
this.moveable.keepRatio = true;
this.moveable.draggable = true;
this.moveable.rotatable = true;
});
And my data:
data() {
return {
moveable: {
draggable: false,
resizable: false,
scalable: false,
rotatable: false,
keepRatio: true,
pinchable: true,
snappable: true,
verticalGuidelines: [100, 200, 300],
horizontalGuidelines: [0, 100, 200],
renderDirections: ["nw", "ne", "sw", "se"],
container: document.getElementById(`${this.parentId}`),
className: `moveable-box moveable-${this.el.id}`,
target: '.target'
}
}
}
I got:
Error TS7016 (TS) Could not find a declaration file for module 'vue-moveable'. 'E:/project/node_modules/vue-moveable/dist/lib/VueMoveable.common.js' implicitly has an 'any' type.
Try npm install @types/vue-moveable
if it exists or add a new declaration (.d.ts) file containing declare module 'vue-moveable';
E:\projec (tsconfig or jsconfig project)
when I try import vue-moveable at project with typescipt.
I just try:
import Moveable from 'vue-moveable';
...
How I should do this on project with type script?
Currently library includes polyfill for built-ins like Promise
, Symbol
or Object.assign
.
But according to the Vue CLI docs:
When using Vue CLI to build a library or Web Components, it is recommended to pass useBuiltIns: false to @vue/babel-preset-app to disable automatic polyfill injection. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills.
We can cut up to 20kb of JS from the bundle
TODO:
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project ✨
Your semantic-release bot 📦🚀
hello,
I checked ou component, looks nice but I got 2-3 issues. when doing pinh, it work for a few times. the it stops. when doing pinch rotate it flickers between the rotated view and the normal rotation. after this the scale is also gone.
Proof: https://cdn.jsdelivr.net/npm/[email protected]/dist/lib/VueMoveable.umd.js
search for 0.17.5
How could I with Vue hide and show line helpers?
I have a few elements, and want sometimes remove all moveable functionality. Like it will be not draggable, not resiazable, not wrapable and so... I can do that just added moveable.draggable="false", moveable.scalable="false" ... But, blue line-helpers are still there.
My problem is that div with class name "moveable-control-box" which contains all line/point helpers to drag/resize/wrap element is added directly into the body tag. And I do not know how can I access and style correct "moveable-control-box" element within Vue.
Do you have some ideas?
Hi there,
my setup works well, i just implemented bounds setting like this :
bounds: { left: 0, right: 780, top: 0, bottom: 400},
dragArea : true,
snappable: true,
now IF the moveable touch a bound when dragging THEN when drag is released it becomes undraggable and stay stucked.
I am not ure this is the expected behavior, am i missing an option ?
Thanks.
Hello,
I have a comment box like image below, I can not focus to textarea to type some text. I'd like to add 1 button (icon drag) instead hold and move any position inside element.
This is my code
<Moveable
class="moveable"
v-bind="moveable"
:container="container"
ref="moveable"
@drag="handleDrag"
@resize="handleResize"
:style="{ 'left': comment.left, 'top': comment.top, 'width': comment.width, 'height': comment.height, 'position': 'absolute' }"
>
<section
class="heatmap-comment--item p-3"
>
<TextareaAutosize
@click="handleClick"
ref="textarea"
:placeholder="$t('comment')"
v-model="comment.message"
:min-height="30"
:max-height="150"
/>
<div class="buttons">
<b-button class="button is-primary" @click="handleSaveComment()">{{ $t('button.save') }}</b-button>
<b-button class="button" @click="handleDeleteComment()">{{ $t('button.delete') }}</b-button>
</div>
</section>
</Moveable>
Any help!
Hi - I have a codesandbox demo here of the problem I'm seeing.
I want to be able to move the box you see on screen by dragging the "Move" in the top-left, and that works fine.
I want to be able to "close" the box, by which I mean just reduce it to the banner at the top with the "Move" and "Close" controls. This almost works... the problem is that, although the height for the containing "div" (which is, I believe, the Moveable) changes, the blue edge rectangle stays the same size, so although the content goes away, the bounding box remains.
I've tried a lot of things such as trying to trigger "resize" events, etc., but gotten nowhere.
Thanks!
Hello,
I am having an issue with events:
@drag-end="console.log('end')"
@dragstart="console.log('start')"
Gives me an error:
"dragend" is emitted in component but the handler is registered for "dragEnd". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "drag-end" instead of "dragEnd".
And no callback is executed.
BTW: thank you for the library!
Hello, I've updated vue-moveable to version 1.5.0. and I can not reference to setState() method.
I used (for example)
this.$refs.moveable.moveable.setState(() => this.moveable.draggable = true)
Now i can't set moveable values andI don't see my renderDirections.
Access to moveable-control-box also changed, from this.$refs.moveable.moveable.innerMoveable.preactMoveable.base.style to this.$refs.moveable.moveable.innerMoveable.moveable.moveable.controlBox.element.style - is that correct?
Does it have an option show or hide the control box, or the blue box?
Hello and thank you for this library!
I'd like to initialize the component with specific size / location. Is it possible?
I have a problem with scalling texts - i would like to have defined moveable box and in there some text. When scalling, I want box scalling, not text. Now Text is scalling to, which breaks font-size.
Can I get this with Moveable?
It has props of target in moveable.
Each time the target changes, the moveable box changes.
But only vue is different.
moveable.target = document.querySelector("'target');
<Moveable target={document.querySelector(".target")} />
<ngx-moveable [target]="document.querySelector("'target')"/>
<vue-moveable>
<div class="target"></div>
</vue-moveable>
I'm looking for the Vue version of the basic resizable example from the Moveable storybook (https://daybrush.com/moveable/storybook/?path=/story/basic--resizable), that only moves the corner/edge you drag when resizing and keeping the opposite corner/edge at the same place.
Is it possible to limit element movements by a parent container size?
I want to make the page an edit page. Thus, when on edit page there is a blue line and everything is draggable and such but when you press save everything is "saved" and i want to hide the blue lines.
Is there a way to hide the blue lines surrounding your html elements?
Hi, I'm starting to play with Vue Moveable and I'm trying to get the moveable to stay inside its container. I've set, draggable, dragArea, and snappable to the demo sandbox according to the docs. I have added a :container="$refs.container"
to specify the container and set styles on the container and then try to set bounds.
The object can still be moved outside the container and the bounds seem to only apply to the document body and not the container. Shouldn't the bounds apply to the reference container or am I misunderstanding how this should work?
Here is a CodeSandbox with the issue. If the container is set, shouldn't the bounds apply to the container so that the moveable should be kept within the green box container?
Thank you for any help!
When there are multiple moveable objects on the document.body, only one can be active at a time. You also have to wire up a button in-order to re-activate the non-active items. Is there a way to assign an ID and/or key so that each moveable object can be moved all the time without having to re-activate?? Seems like (from issue #35) that it should be possible to have multiple active objects.
Hello, how can we set the movable component to active on mouse click or drag, move and resize and then set as inactive on blur?
Thanks!
I have multiple instances of the vue-moveable, how can I know which one was resized/dragged or so?
Add some basic unit tests to make sure library works fine after moveable
upgrade and component changes
So I used this package and really loved the features offered but when I try to build my own vue component into html file, the moveable controls don't align properly and they go in the top left corner of the screen.
This is the command I use to build component into /dist folder
npx vue-cli-service build --target wc --name my-component 'src/components/MyComponent.vue' --inline-vue
@ibadass You need to pass container ref as a prop to <Moveable>
:
<div class="container" ref="container"> <!-- here -->
<Moveable
class="moveable"
v-model="row.key"
v-bind="moveable"
:container="$refs.container" <!-- here -->
@drag="handleDrag"
@resize="handleResize"
@scale="handleScale"
@rotate="handleRotate"
@warp="handleWarp"
v-for="(row, index) in rows"
:key="index"
>
<span>Vue Moveable</span>
</Moveable>
</div>
https://codesandbox.io/s/vue-material-also-works-on-the-right-side-j5psx
Originally posted by @probil in #28 (comment)
Hi @probil,
I had save a moveable object in my db, and I want display this object when I'm on my component.
But I can't access to a moveable object by her ref after I created a new one, I need to access to getRect()
could you help me ?
Thanks
ibadass
I want to create polygon like moveable under specific div given that I have 4 x-y coordinates where the moveable needs to be placed. And also need new position (if changed by user) w.r.t. that specific div. Please guide.
If I select or drag any object then it should be active among all the objects.
Example
https://codesandbox.io/s/vue-moveable-demo-buy5u?file=/src/App.vue
Hi, I have this structure in one of my components, with one moveable inside another one:
<template>
<Moveable> // moveable #1
<div>
<Moveable> // moveable #2
<div>
</div>
</Moveable>
</div>
</Moveable>
</template>
Both moveables have draggable enabled and methods that handle drag as specified in vue example in this project's README.
When I am dragging moevable#2
, moveable#1
also receives drag event and is moving as well. Is there any way I can easily stop drag event propagation from moveable#2
to not trigger on moveable#1
?
I am using verison 1.8.9
moveable
as dependencyBased on the Moveable documentation (found here: https://github.com/daybrush/moveable/blob/0.13.4/handbook/handbook.md#toc-group), you can create a group of moveable elements by passing an array to the target
property. However, doing so in vue-moveable after initialization throws the following error:
Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of undefined
I've confirmed that this occurs no matter the type of elements. It's present with both div
and svg
. Additionally, if the array has only a single element in it, this error does not occur.
Demo:
https://codesandbox.io/s/vue-moveable-group-problem-9r6sf?fontsize=14&hidenavigation=1&theme=dark
Vue-Moveable version: 1.4.0
i have more vue-moveable,how to find which moveable-control-box when i click moveable?
Since March CircleCI stops supporting common configuration file so existing configuration file needs to be rewritten using pipelines to continue using the service
Hello I'm new to vue and I'm using vue-moveable in a subcomponent and but controls are moving all over the page. I want them in that component only. I tried using the container prop mentioned in API documentation. like this
data: function () {
return {
moveable: {
container: document.getElementById('html-container'),
draggable: true,
throttleDrag: 0,
resizable: false,
throttleResize: 1,
keepRatio: false,
scalable: true,
throttleScale: 0,
rotatable: true,
throttleRotate: 0,
pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
origin: false,
}
}
},
in vue dev tools it shows null, I'm assuming it is running before the component is rendered or etc.
any way to achieve the required functionality?
I just tried installing vue-movable with npm, but instead of your project, I got this one: https://www.npmjs.com/package/vue-movable
Is your project under a different name?
Is it possible to apply keepRatio for all resize circles, currently it does work only for the corner circles.
Or is it possible to hide some of the resize circles?
I would like to get information about width and height od my moveable element after scaling. I tried to use method getRect(), like showed here: daybrush/moveable#94, but in console I got TypeError: e.currentTarget.getRect() is not a function
My code:
<template>
<Moveable
@scale="handleScale"
@scaleEnd="(e) => {handleScaleEnd(e)}"
ref="moveable"
>
</template>
<script>
export default {
methods: {
handleScale({ target, transform, scale }) {
target.style.transform = transform;
},
handleScaleEnd(e) {
console.log(e.currentTarget.getRect());
},
}
}
How can I use methods, defined in Moveable documentation, like getRect, destroy, setState etc.
This is how the control box gets rendered for me. The width seems to be correct, but the height and position are off. I'll also try and create a codesandbox to replicate this as soon as I get a chance. I'd don't see as an issue under moveable
nor for vue-moveable
so it's most-likely something small on my side, but I just can't seem to figure it out 😞
This is my code:
<moveable
v-bind="moveableOptions"
@drag="handleDrag"
@resize="handleResize"
@rotate="handleRotate"
>
<img ref="avatar" class="avatar" :src="avatar" :style="avatarConfig" />
</moveable>
moveableOptions: {
draggable: true,
resizable: true,
keepRatio: true,
rotatable: true,
pinchable: true
}
e.g.
https://codesandbox.io/embed/vue-template-3wd0w
The key point is on the container property
Is my usage wrong?
#8
I have same problem,
version: 1.5.0
container have full width,
when i change width of side element programmatically that happens again
Excuse me for my poor english.
vue 2,moveable-vue version:1.4.0
1.I didn't set the initialization style. I expected the width of the moveable-box to be the default target width. But when there are multiple moveables, it becomes the widest target width.
2.I did not use moveable-vue 1.5.0, because only one of them can be used normally when there are multiple moveable instances in version 1.5.0
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.