Group drag handlers

[luislozad]

Environments

• Framework name: JS Vanilla / StencilJS
• Framework version: Last
• Moveable Component version: 0.42.1
• Testable Address(optional):

Description

I don't know if this behavior has already been reported. Both containers are with fixed position, there is no problem when I drag one by one or when I try to drag groups that are only on the left side, but when I try to do the group drag on the right side this happens:

And thank you very much for the great work you are doing with this great library 😄.

[daybrush]

@luislozad

What is the element structure?

Where is the Moveable on the element

I want to know the element tree structure of those two device containers and targets.

[daybrush]

@luislozad

My guess is that it's likely in that container.

<div class="table-container">
    <Moveable />
   <!-- Maybe Moveable here -->
   <div class="fixed-target"></div>
   <div class="fixed-target"></div>
</div>
<div class="phone-container">
   <div class="fixed-target"></div>
   <div class="fixed-target"></div>
</div>

It is recommended to place it in a parent container.

<Moveable />
<div class="table-container">
   <div class="fixed-target"></div>
   <div class="fixed-target"></div>
</div>
<div class="phone-container">
   <div class="fixed-target"></div>
   <div class="fixed-target"></div>
</div>

[luislozad]

@daybrush The structure is this:

<div class="fixed table-container">
   <div class="relative-target"></div>
   <div class="relative-target"></div>
</div>
<div class="fixed phone-container">
   <div class="relative-target"></div>
   <div class="relative-target"></div>
</div>
<Moveable />

I believe that the problem is because the containers are with fixed position and the children in relative position, I suppose that when calculating moveable the position of the handlers only takes the distance from the parent to the child and in this case the parent is phone-container, but only the global container is taken and its position is left: 125px + 0px instead of left: 125px + 980px.

Maybe the solution is:

<div class="fixed table-container">
   <div class="relative-target"></div>
   <div class="relative-target"></div>
   <Moveable />
</div>
<div class="fixed phone-container">
   <div class="relative-target"></div>
   <div class="relative-target"></div>
   <Moveable />
</div>