Dragabble

Draggable elements that can be moved around the page

Dragabble Banner

Testing Framework

Advanced testing solutions for developers

Draggable Elements

Click and drag the elements to move them around

Drag Me 1
(50, 50)
Drag Me 2
(200, 100)
Drag Me 3
(100, 200)
Drag Me 4
(300, 150)
Drag Me 5
(150, 300)
Click and drag to move items

Drag Status

Current positions and drag history

Current Positions:

Drag Me 1(50, 50)
Drag Me 2(200, 100)
Drag Me 3(100, 200)
Drag Me 4(300, 150)
Drag Me 5(150, 300)

Drag History:

No drag actions yet

Statistics:

Total Items:5
Drag Actions:0
Container:600×400
Active:No

Instructions:

  • • Click and drag items to move them
  • • Items are constrained to the container
  • • Use buttons for quick arrangements
  • • Watch coordinates update in real-time

Testing Information

Draggable Element IDs:

  • dragContainer - Main drag area
  • drag1 through drag5 - Individual draggable items
  • Each item has mouse event handlers for dragging
  • Position coordinates updated in real-time

Testing Scenarios:

  • • Drag items to different positions
  • • Test boundary constraints
  • • Verify position updates in status panel
  • • Test arrangement buttons
  • • Check drag visual feedback
Dragabble Footer

Premium Testing Tools

Boost your automation testing with professional tools