onMove move the snapped elements with it

[tawjaw]

Hello, I am using this library and the LeaderLine to create wires connections (image below)

For the wire, I have two draggable elements that are connected with a line (start and end element). The snap of the each element is the pins positions on the Uno board or Led pins etc.

this way, I can drag the wire from either side and snap it to a pin (connect it).

What I like to do is when I move the Led or Uno board to move with it the wire (start or end element), so that it maintains the snapping (connection)

Thanks!

[anseki]

Hi @tawjaw, thank you for the comment. Do you mean that the parent element is also draggable?

[anseki]

Like this? https://jsfiddle.net/4Lj87egc/

[tawjaw]

Like this? https://jsfiddle.net/4Lj87egc/

Not really. In your example the board is the parent div. so moving the board will move everything in it.

I modified your example: https://jsfiddle.net/tawjaw/sprvza5j/4/

The board and the pins all have the same parent div. When the board moves, I can update the snap points like you showed me here #93

But I want the snapped pins to move with it too.

[anseki]

Do you mean that the board can't contain elements? If so, you can move those by left/top easily. For example: https://jsfiddle.net/u20x1owh/

[tawjaw]

This is still moving everything with it regardless if it is snapped or not.

in the case of the image above, the right pin should not move when the board is moved because it is not snapped. The left should move because it is snapped.

something like this

function fixPosition() {
    // Check first if it is snapped
    if(draggable01.snapped)
    { //move it with the board
         draggable01.left = draggableBoard.left + position01.x;
         draggable01.top = draggableBoard.top + position01.y;
    }
    draggable02.left = draggableBoard.left + position02.x;
    draggable02.top = draggableBoard.top + position02.y;
    line.position();
  }

but snapped is not a flag on the draggable object itself.

I can probably keep track of the snapping status per draggable separately.

[anseki]

Sorry, I couldn't understand your app well. Anyway, was the question of this issue solved? Maybe you are saying about new issue.

[anseki]

This is an example that implemented pins that follow the board when it was snapped to a hole. https://jsfiddle.net/5ozh9dqj/

[tawjaw]

Thanks @anseki

your last example is what I am looking for!

[anseki]

:smile: