Percentage based drag system

[AndrewRayCode]

I'm trying to create resizable split panes. If a draggable component (the handle between panes) is set to a % offset from its parent, it's much more convenient. I'm not sure I can fanangle it with a transform: translate setup

[joeporpeglia]

I have a similar use case and I'm using DraggableCore to handle it. Just manually set the left and top styles as a percentage on DraggableCore's child.

[phillfer]

@joeporpeglia Could you give an example on how you did that?

[designcrumble]

For anyone still looking for an answer, this might be helpful: I am storing x, y positions of the item relative to its parent/bounds container. Then just setting position absolute on the Child and passing top and left styles after converting the float to %.

<Draggable
  key={i}
  axis="both"
  handle=".handle"
  position={null}
  cancel=".content-is-editable"
  // grid={[25, 25]}
  scale={1}
  disabled={props.disabled}
  {...dragHandlers}
>
  <div
    className="handle cursor-move absolute"
    id={item.id}
    datatype={item.item_type}
    style={{ left: `${item.x * 100}%`, top: `${item.y * 100}%` }}
  >
    <div className="item item--media text-serif text-styled-500">
      {item.content}
    </div>
  </div>
</Draggable>;

[isaac-wahba]

For anyone still looking for an answer, this might be helpful: I am storing x, y positions of the item relative to its parent/bounds container. Then just setting position absolute on the Child and passing top and left styles after converting the float to %.

<Draggable
  key={i}
  axis="both"
  handle=".handle"
  position={null}
  cancel=".content-is-editable"
  // grid={[25, 25]}
  scale={1}
  disabled={props.disabled}
  {...dragHandlers}
>
  <div
    className="handle cursor-move absolute"
    id={item.id}
    datatype={item.item_type}
    style={{ left: `${item.x * 100}%`, top: `${item.y * 100}%` }}
  >
    <div className="item item--media text-serif text-styled-500">
      {item.content}
    </div>
  </div>
</Draggable>;

Did you find a way? I tried implementing a condition to implement the dragging percentage based on the parent element's width compared to the current element width, but It did not work on iPhone.