What demo do you want?

[daybrush]

I'm going to make a demo.

https://github.com/daybrush/moveable/blob/master/storybook/README.md

Like as follows:

https://github.com/naver/egjs-infinitegrid

https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/virtual-scroll--gridlayout

Please let me know if there is a demo you want. Feel free to write a comment. I will consider.

[leeboo]

good jobs and thanks daybrush
i want to make this effect, can you give me any idea?

now i have problem when use two moveables #187 #189

[schester44]

@daybrush One issue i'm seeing while using react-moveable is how to initialize a non-targeted element with rotation.

It seems like Moveables rotate value initializes at 0 so the calculations are off for an item that is initially rendered with rotation.

Here is an example:
https://codesandbox.io/s/quizzical-kowalevski-qi3xk

Try rotating the def element. onResizeEnd, we update the element's rotate value which causes the transforms to be incorrect.

I need to initialize an element with transforms and after being dragged/resized/rotated, I need to update the same state that was used to initially transform the item.... if that makes sense.

So an example that shows how to use Moveable with elements that were previously altered from another session would be helpful.

[satheshrgs]

@daybrush I need a demo using any of svg elements like rect or circle without using frame from scenejs. I tried a basic example and made it happen..The following are some of my issues i have faced

1. setting x,y of element in onDrag resets the position of mouse pointer to edge of that element..Is there any proper way to drag svg elements ?
2. Moveable origin sets to left corner of the page. so unable to rotate properly

here is the sanbox link of what i have tried
https://codesandbox.io/s/react-moveable-demo-btg9u?file=/src/index.js

[yojona]

I want to resize an image to negative width/height and produce mirroring, is that possible?

[Naggertooth]

Demo with more than 1 moveable component :)

spoiler

Resize is working on 2 targets

[happylinks]

Hey @daybrush, would you have time to make a demo with "scrollable" for "moveable"? I'm trying to combine these 2 examples:
https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time
https://daybrush.com/selecto/storybook/?path=/story/selecto--select-in-the-scroll-area

But I'm having an issue where the element moves really fast when dragged outside of the view (scrolling) and isn't in sync with the mouse cursor anymore.
I'll try to reproduce the error in a codesandbox as well, but maybe there's an example already somewhere?

Edit: I'm trying horizontal + vertical scroll. And also, it seems like onScrollGroup is not triggered.

[atomoc]

Please add a demo that describes all kinds of embellishments, such as changing colors, sizes, and the like.

[JayBhuva]

Please tell me how can I upload the manipulated image from movable?

[daybrush]

@atomoc

Main demo
https://daybrush.com/moveable/

[daybrush]

@happylinks

Scroll With Selecto Demo is fixed.

Other demos are in preparation.

[sooryaraj]

@daybrush can you please do this (https://daybrush.com/moveable/) this demo in vanila JS

[alezzigo]

good jobs and thanks daybrush
i want to make this effect, can you give me any idea?

now i have problem when use two moveables #187 #189

@leeboo can you public source code this effect?

[MiiZZo]

@daybrush can you add to your demo the ability to group items using CTRL + G for example?

[littlee]

@daybrush How to implement an "Auto-Select" feature, just like the doc's demo

https://daybrush.com/moveable/

the demo code is too complicated to understand

in my own project, I have to click to set the target to the current layer, then start the drag with another mouse down

https://codesandbox.io/s/gifted-poitras-ubs5v

I have changed onClick to onMouseDown, but it still does not work.

[daybrush]

@MiiZZo
Sorry, but that seems a little difficult.

@littlee

here demo:
https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--change-the-moveable-targets-by-selecting-it

[GreatAuk]

need some doc like this😂

#311 (comment)

[daybrush]

@happylinks

https://daybrush.com/moveable/storybook/?path=/story/support-scroll--use-scrollable

[ItsNotPat]

Can you make a demo of switching targets while dragging, rotating and scaling are enabled?

I seem to have a problem with the targets. They keep copying that changes applied to the other one

[iofjuupasli]

https://daybrush.com/moveable/

In this demo selecto is used to create new items. Is it possible to create item immediately and trigger resize? So user will see end result with actual content right while dragging new item. For example when adding circle, to see how it will look, I need to mouseup

---

I solved it myself. I use drag start/drag/end events from selecto to create/update/save new item

[ItsNotPat]

Hi, @iofjuupasli, Do you have a sample with the demo code? So I can understand it better. Thank you very much. :D

[daybrush]

@marcosTenorio
https://daybrush.com/moveable/storybook/?path=/story/use-snap-bounds-with-ables--bounds-area

[daybrush]

@ItsNotPat

https://github.com/daybrush/scena/tree/master/packages/react-editor/src/Editor

[DavidM42]

A demo implementing something like this draggable shelf type component

[satheshrgs]

@daybrush Is it possible to show a border using moveable / selecto when hovering on a selectable target ? Or is there any possible way using CustomAbles ?

Example:

[DerrykBoyd]

@daybrush would it be possible to add customClipPath to the clippable examples? I wasn't able to get that working on my project.

[iCloudys]

There are multiple 'moveable' in a page, which are isolated from each other and can only be active within their own containers

[chwan97]

There are multiple 'moveable' in a page, which are isolated from each other and can only be active within their own containers

hey, Did you achieve the effect in this picture?

[chwan97]

iCloudys

老哥，最后实现这个效果了吗，我这总跳到左上角，然后才正常

[iCloudys]

iCloudys

老哥，最后实现这个效果了吗，我这总跳到左上角，然后才正常

我自己撸了一个差不多的，核心部分已经弄完，增强功能还在开发，暂时还无法放出来。

[Ain477]

@atomoc

Main demo https://daybrush.com/moveable/

How can we add the delete button?

[jeffceriello]

Hi, is there a react demo which includes drag, resize, rotate and snappable bounds within a parent square container?

I am struggling with the rotate. When I start rotating the target jumps to the top left. Then when I drag or resize after rotate the target loses the rotation.

Any help is hugely appreciated..! Thanks

[iCloudys]

There are multiple 'moveable' in a page, which are isolated from each other and can only be active within their own containers

QQ20220221-161556.mp4

[daybrush]

@iCloudys

Use individualGroupable option to true (default: false)

[acabreragnz]

good jobs and thanks daybrush
i want to make this effect, can you give me any idea?

now i have problem when use two moveables #187 #189

@leeboo can you public source code this effect?

@daybrush is there a way with the current API to show the non-clipped section with some opacity (like in the leeboo example)?

Something like this:

[jtr-dev]

Hello, thanks so much for maintaining these packages. It's amazing to find such a resource.

I'd like to ask how we could go about creating a demo for dragging at the bottom of a page so that it:

1. Scrolls down while dragging
2. Persists that state to moveable and selecto

Thanks!

[RachelBra]

I want to resize an image to negative width/height and produce mirroring, is that possible?

@daybrush how is that possible ?