[Question]: How to drag and drop an element by offset

Your question

Is there a way to drag and drop an element by offset with playwright? Something similar to this: drag_and_drop_by_offset(source, x_offset, y_offset).

The page.drag_and_drop(source, target, **kwargs) (doc) method of playwright seems it can drag a source element into a target element. But how can I drag an element by offset?

[davuses]

@davuses can you just do a mouse down, mouse move & mouse up then? Can you share a link for the website for me to play with?

Actually I have managed to do this by combining page.mouse.move(), page.mouse.down() and page.mouse.up() methods. The code to achieve this is as follows:

box = elem_to_drag.bounding_box()
assert box is not None
# move mouse to the center of the element
page.mouse.move(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)
page.mouse.down()
page.mouse.move(box["x"] + x_offset, box["y"], steps=10)
page.mouse.up()

It did the job, could seem a bit redundant though.

[baptisteArno]

You can also do this:

const draggableElementSelector = '...'
await page.dragAndDrop(
    draggableElementSelector,
    draggableElementSelector,
    { targetPosition: { x: 0, y: 80 }, force: true }
  )

It will drag an element with an yOffset of 80