How to Drag and Drop in Vibium

To drag and drop in Vibium, find the source element and call dragTo() with the target, like vibe.find("#item").dragTo(vibe.find("#dropzone")). Vibium auto-waits for both elements to become actionable, then performs a real pointer sequence — press, move, release — over WebDriver BiDi. Because these are genuine input events rather than synthetic DOM dispatches, drag-and-drop works on sortable lists, kanban boards, file uploaders, and HTML5 drag widgets that listen for mousedown, mousemove, and mouseup. The one-line dragTo() covers the vast majority of cases. When a widget needs intermediate hover states, momentum, or precise drop coordinates, you can drive the drag manually with the low-level mouse API: move to the source, mouse.down(), move toward the target in steps, then mouse.up(). Both approaches are shown below, all runnable as-is.

How do I drag one element onto another?

Find the source, then call dragTo() and pass the target element. Vibium handles the full pointer sequence for you.

from vibium import browser_sync as browser
 
vibe = browser.launch()
vibe.go("https://example.com/board")
 
source = vibe.find("#card-1")
target = vibe.find("#column-done")
 
source.dragTo(target)
 
vibe.quit()

Both elements are auto-waited for actionability before the drag begins, so you do not need a manual wait between find() and dragTo(). The drag scrolls the source into view first if needed, exactly like a click does. See How to Find Elements in Vibium for selecting the source and target reliably.

Does drag and drop fire real mouse events?

Yes. dragTo() uses WebDriver BiDi's input.performActions to emit a true pointer sequence, not a faked dragstart event. This is what makes it work where Selenium's older Actions API often struggled.

from vibium import browser_sync as browser
 
vibe = browser.launch()
vibe.go("https://example.com/sortable")
 
# reorder a sortable list item
first = vibe.find("ul.sortable li:nth-child(1)")
third = vibe.find("ul.sortable li:nth-child(3)")
 
first.dragTo(third)
 
vibe.quit()

Many JavaScript drag libraries (SortableJS, react-dnd, native HTML5 DnD) only respond to genuine pointer events with real coordinates. Because Vibium drives the browser's input system directly, those libraries see the drag exactly as they would from a human.

How do I control the drag manually?

For widgets that need intermediate moves, hover states, or momentum, drive the pointer yourself with the mouse API. Move to the source, press, move toward the target in steps, then release.

from vibium import browser_sync as browser
 
vibe = browser.launch()
vibe.go("https://example.com/canvas")
 
source = vibe.find("#handle")
target = vibe.find("#target")
 
box = source.bounds()       # {x, y, w, h}
dest = target.bounds()
 
# press at the source center
vibe.mouse.move(box["x"] + box["w"] / 2, box["y"] + box["h"] / 2)
vibe.mouse.down()
 
# move in steps so velocity-based widgets register the drag
vibe.mouse.move(dest["x"] + dest["w"] / 2, dest["y"] + dest["h"] / 2)
vibe.mouse.up()
 
vibe.quit()

The bounds() method returns the element's bounding box (x, y, w, h), which you use to compute center points. Breaking the move into intermediate steps helps with sliders and canvas widgets that read pointer velocity. For simple element-to-element drags, prefer dragTo() — it is shorter and auto-waits for you.

dragTo() vs manual mouse control

• source.dragTo(target) — the default. One line, auto-waits both elements, handles the full press-move-release sequence.
• Manual mouse.down() / move() / up() — for fine control: intermediate moves, hover states, exact coordinates, sliders, canvases.

Start with dragTo(); drop down to the mouse API only when a widget needs more than a straight source-to-target drag.

Next steps

• How to Click Elements in Vibium
• How to Scroll to an Element in Vibium
• What is Vibium?