Drag using keyboard arrow keys. (Angular)

[iprasadg]

For more better user experience I want to drag target on keyboard arrow keys. Is there any way to drag using keyboard arrow keys. I am in the middle of following.

document.addEventListener('keydown', (e) => {
   if (e.keyCode === 38) {
       // I think here I should trigger onDrag, but unable to trigger
   }
 });

Thanks in advance.

[daybrush]

@iprasadg

I think that's a good idea. I planned to add it later, but it's not easy.

This may seem a bit late, but I will try to do it fast.

[iprasadg]

@daybrush No issues. 👍 Thanks.

[daybrush]

@iprasadg

• moveable 0.15.1
• react-moveable 0.18.0
• preact-moveable 0.17.0
• ngx-moveable 0.11.0
• svelte-moveable 0.6.0

Added request method.

https://daybrush.com/moveable/release/latest/doc/Moveable.html#request

Draggable

https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request

Resizable

https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request

Scalable

https://daybrush.com/moveable/release/latest/doc/Moveable.Scalable.html#request

Rotatable

https://daybrush.com/moveable/release/latest/doc/Moveable.Rotatable.html#request

Applied to the main demo.

https://daybrush.com/moveable/

moveable/demo/src/Editor.ts

Lines 60 to 77 in 482e8d6

	addControlEvent(controlXElement, value => {
	moveable.request("draggable", { x: parseFloat(value), isInstant: true });
	});
	addControlEvent(controlYElement, value => {
	moveable.request("draggable", { y: parseFloat(value), isInstant: true });
	});
	addControlEvent(controlWElement, value => {
	moveable.request("resizable", { offsetWidth: parseFloat(value), isInstant: true });
	});
	addControlEvent(controlHElement, value => {
	moveable.request("resizable", { offsetHeight: parseFloat(value), isInstant: true });
	});
	addControlEvent(controlRElement, value => {
	moveable.request("rotatable", {
	deltaRotate: parseFloat(value) - parseFloat(frame.get("transform", "rotate")),
	isInstant: true,
	});
	});

[bxchang04]

In the main demo, if the keyboard arrow is held down, the feature eventually breaks for me (Chrome, latest ver.).

I think this is a bug. Can you please investigate? Thanks for this new feature!

[prabhatojha]

On top of keyboard support to drag item, I think it would be better to consider and display Horizontal, Vertical, Element guidelines suggestion. Just like how it does when we drag using Mouse.

Please let me know, if this feature is already there.

[marcosTenorio]

@daybrush is it possible to apply this request method, or a way to move the element with arrow keys, in this demo https://codesandbox.io/s/react-moveable-demo-jl69c?file=/src/index.js:4834-4840 ?

[xiaopujun]

moveable.request("draggable", { y: parseFloat(value), isInstant: true });

Hello, is it possible to pass custom parameters to the request API? After passing it can this parameter be received in the onDragEnd event of the Moveable component?
I checked the API documentation you provided and found that I can receive other custom parameters, but I can't seem to receive and process it. Or is there something wrong with the way I'm using it?

Here is my code:

 movableRef?.current?.request("draggable", {
            x: layoutItem!.position![0],
            y: layoutItem!.position![1],
            //this is my custom params
            datas: {backoff: true}
        }, true);
        
        
        
        <Moveable ref={this.movableRef}
                        //...
                          // I want to accept param here. Can it be supported at this time?
                          onDragEnd={this.onDragEnd}
                         //...
                />