search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
773 stars 99 forks source link

Question: Moving multiple draggable items in step? #135

Closed g40 closed 1 year ago

g40 commented 1 year ago

By inspection one can see that a drag is achieved by modifying the transform attribute of the element in question. In this case, the top/left attributes are used only when adding the element dynamically to a layout.

To move multiple elements as a group, is it best to simply adjust the transform values to suit? Or is there a safer API available?

<img id="draggable_10" src="data:image/..." tabindex="0" class="plain-draggable" style="position: absolute; left: 68px; top: 208px; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: transparent 0px 0px 1px; cursor: grab; user-select: none; transform: translate(60px, 0px);">
anseki commented 1 year ago

Hi @g40, thank you for the comment. It seems that you mistook left / top CSS properties for the left / top attributes. PlainDraggable never changes attribute, and it never changes the left / top CSS properties unless leftTop option of constructor is specified. If you want to change the position of the draggable element manually, you can use left / top options or properties of PlainDraggable. If you change both left and top, the options are better than properties.

g40 commented 1 year ago

@anseki Thank you.

Yes - please ignore the left/top attributes. Those are for setting the initial position only - that BTW should be one of the options passed to the PlainDraggable constructor.

I am not enabling the leftTop option so is it best to simply modify the transform translate values?

anseki commented 1 year ago

The left / top attributes should not be passed to the constructor because those don't exist. And also, PlainDraggable should not move the element via those because it has already left / top options. The changing transform CSS property is not good way. That may break the library. The way that I recommended is best way because the library was designed with that. In other words, the library doesn't consider your way.

BTW, I can't understand the "multiple elements as a group" that you said. Do the multiple elements move synchronously by dragging one of those?

g40 commented 1 year ago

Ignore the left/top attributes. These are for my code to locate elements in a div. So that leaves 2 questions: 1) How to specify the initial position of the newly added element? 2) How to move 2 or more element synchronously by dragging one of them?

anseki commented 1 year ago

Ignore the left/top attributes. These are for my code to locate elements in a div. So that leaves 2 questions:

  1. How to specify the initial position of the newly added element?

You don't have to specify that to PlainDraggable because PlainDraggable never changes the position unless the element is dragged. That is, the element is only rendered via your HTML and CSS code. You can position the element by using your favorite way.

  1. How to move 2 or more element synchronously by dragging one of them?

This may help you: https://jsfiddle.net/513r7asp/ If you answer the my question, I can understand more that.

anseki commented 1 year ago

No reply came, then this abandoned issue is closed.

Anyway, if you want to change the position of the draggable element manually, the best way to that is the left / top options, as I have repeatedly said since the my first comment. https://github.com/anseki/plain-draggable/issues/135#issuecomment-1528647481