Using Arrow Keys to Change Positioning

[graywolf336]

Is it possible to bind the arrow keys on an item that is moveable to nudge it up by a configurable amount of units? For example, when I select an element (bring it to focus), I would like to be able to use my arrow keys on the keyboard to change the position of that element.

[lf2com]

This is a great suggestion! There is a little bit difficulty but I'll try to make it come true.

[lf2com]

Hi @graywolf336, I added a handle function for this feature. Please feed to the function with the target rectangle with new top/right/bottom/left, and it will check the target rectangle info with all the other attract relationships of group members then set the target to the suitable position.
Please notice that the unit of px the arrow added should be greater than the distance of the magnet, or it would be stuck on the other attracted member and couldn't escape.

[graywolf336]

That could work. My thought was that someone could use the arrow keys to nudge a selected item just a hair's width away from an item. Is there a way to temporarily disable the magnet in that function? Like how holding control while moving does

[lf2com]

Yes, the 3rd argument of .handle(...) is a boolean value for setting attractable. If not assign the 3rd argument, it would take the value of magnet.getAttractable() (default is true).

magnet.handle(targetDom, targetRect, attractable);

So input the new rectangle that is nudged some pixels like the following sample:

let originRect = targetDom.getBoundingClientRect();
// move left for 1 px
let newRect = {
  top: originRect.top,
  right: (originRect.right - 1),
  bottom: originRect.bottom,
  left: (originRect.left - 1),
  width: originRect.width,
  height: originRect.height
};
magnet.handle(targetDom, newRect, false);

So either one of the following ways could help to nudge with pixels less than the attraction distance:
a)

1. Call magnet.setAttractable(false) to disable attraction first
2. Do magnet.handle(dom, rect) to nudge DOM without attraction
3. Call magnet.setAttractable(false) to enable attraction again when the moving ends

b)

1. Always call magnet.handle(dom, rect, FALSE) with the 3rd argument false to move the DOM without attraction.

If that still not meet your needs, I'll try to add other solution for this case. Thanks!

[graywolf336]

That is absolutely perfect! I won't be able to start using this in a project until the middle to end of July, but once I do I will provide some feedback. Thank you so much for doing all this! :)

[lf2com]

Thank you for these information! Waiting for your feedback :D