--- description: How to drag and drop an element using Selenium Webdriver - Some web application, have a functionality to drag web elements and drop them on defined area or element. title: How to Drag and Drop in Selenium (Example) image: https://www.guru99.com/images/drag-drop-selenium-1.png --- [Skip to content](#main) **⚑ Smart Summary** Drag and Drop in Selenium WebDriver enables automated simulation of mouse-based interactions that move a source element and release it on a defined target. The Actions class powers these gestures through dragAndDrop and dragAndDropBy methods for precise, repeatable browser automation. * πŸŽ“ Use the Actions class to build keyboard and mouse gestures, then call build() and perform() to execute them on the page. * 🌟 Choose dragAndDrop(source, target) when you have both elements, and dragAndDropBy(source, xOffset, yOffset) when you need pixel-level precision. * πŸš€ Always wait for the source and target elements to be present before invoking the drag operation to avoid flaky tests. * πŸŽ–οΈ Verify the drop visually or by asserting attribute changes on the target so the test confirms real interaction, not just a queued action. * πŸ† AI-assisted locators heal broken XPaths after UI updates, reducing maintenance for drag-and-drop suites running in CI pipelines. [ Read More ](javascript:void%280%29;) ![Drag and Drop in Selenium](https://www.guru99.com/images/drag-drop-selenium-1.png) ## What is Drag and Drop in Selenium? **Drag and Drop in Selenium** is an automated interaction that simulates clicking and holding a source element, moving it across the page, and releasing it on a target location. It is widely used to test modern web applications that rely on drag-and-drop interfaces, such as file uploaders, kanban boards, shopping carts, and dashboard builders. In Selenium WebDriver, drag and drop is performed through the **Actions** class, which provides specialized methods to chain mouse gestures and execute them as a single composite action. [![Drag and Drop in Selenium](https://www.guru99.com/images/1/102717_0423_DragandDrop1.png)](https://www.guru99.com/images/1/102717%5F0423%5FDragandDrop1.png) The Actions class exposes two primary methods for drag-and-drop automation: **Syntax:** ``` Actions act = new Actions(driver); //for drag and drop directly on an element act.dragAndDrop(Source, Destination).build().perform(); //for drag and drop with pixel offsets act.dragAndDropBy(WebElement Source, int xOffset, int yOffset).build().perform(); ``` Here, `dragAndDrop()` takes the source and destination WebElements, while `dragAndDropBy()` takes the source element and the x/y pixel offsets to move it by. ## How to Drag and Drop in Selenium The following three scenarios demonstrate practical drag-and-drop automation on the Guru99 demo page . The goal is to move the **BANK** debit element into the **Account** debit side area so that the amount of $5000 is correctly accounted as a debit transaction. ### Scenario 1: Drag and Drop using the dragAndDrop method In this scenario, the source element (BANK) is dragged onto the destination (Account debit side) using the `dragAndDrop(source, target)` method, which accepts the source and destination WebElements directly. [![Drag and Drop Scenario 1 setup](https://www.guru99.com/images/1/102717_0423_DragandDrop2.png)](https://www.guru99.com/images/1/102717%5F0423%5FDragandDrop2.png) ``` import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDropExample { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/drag_drop.html"); // Locate the source (BANK) element WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a")); // Locate the target (Account debit side) element WebElement Dest = driver.findElement(By.xpath("//*[@id='bank']/li")); // Create the Actions instance Actions act = new Actions(driver); // Perform drag and drop act.dragAndDrop(Source, Dest).build().perform(); } } ``` After the script runs, the **BANK** tile moves into the **Account** debit area and the $5000 amount is registered as a debit. [![Eclipse running the drag and drop script](https://www.guru99.com/images/1/102717_0423_DragandDrop3.png)](https://www.guru99.com/images/1/102717%5F0423%5FDragandDrop3.png) The visual result on the demo page looks like this: [![Drag and Drop output animation](https://www.guru99.com/images/1/102717_0423_DragandDrop4.gif)](https://www.guru99.com/images/1/102717%5F0423%5FDragandDrop4.gif) ### RELATED ARTICLES * [ What is Selenium? Introduction Tutorial ](https://www.guru99.com/introduction-to-selenium.html "What is Selenium? Introduction Tutorial") * [ AutoIT in Selenium Tutorial: How to use it? ](https://www.guru99.com/use-autoit-selenium.html "AutoIT in Selenium Tutorial: How to use it?") * [ How to Execute Failed Test Cases in TestNG ](https://www.guru99.com/run-failed-test-cases-in-testng.html "How to Execute Failed Test Cases in TestNG") * [ How to Upload & Download a File using Selenium ](https://www.guru99.com/upload-download-file-selenium-webdriver.html "How to Upload & Download a File using Selenium") ### Scenario 2: Drag and Drop using the dragAndDropBy method The `dragAndDropBy(source, xOffset, yOffset)` method offers pixel-level precision. Instead of dropping on a target element, it moves the source by a specified number of pixels along the X and Y axes. To determine the offset, hover over the destination area in your browser and read the pixel coordinates with a tool like the inspector ruler or a screen-coordinates extension. [![Identifying pixel offsets for dragAndDropBy](https://www.guru99.com/images/1/102717_0423_DragandDrop5.png)](https://www.guru99.com/images/1/102717%5F0423%5FDragandDrop5.png) ``` import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDropByExample { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/drag_drop.html"); // Locate the source (BANK) element WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a")); // Create the Actions instance Actions act = new Actions(driver); // Drag the source by 400 pixels right and 0 pixels down act.dragAndDropBy(Source, 400, 0).build().perform(); } } ``` The script moves the BANK tile by the supplied offset and drops it on the Account debit side, producing the same financial result as Scenario 1. ### Scenario 3: Drag, drop, and verify multiple elements This scenario chains multiple drag-and-drop operations and verifies the result by asserting the final amount on the target. Several source elements (BANK, SALES, 5000, 500) are moved into their respective debit and credit zones, and the script confirms the totals match the expected balance. ``` import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDropMultiple { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/drag_drop.html"); // Locate sources WebElement srcBank = driver.findElement(By.xpath("//*[@id='credit2']/a")); WebElement srcSales = driver.findElement(By.xpath("//*[@id='credit1']/a")); WebElement src5000 = driver.findElement(By.xpath("//*[@id='fourth']/a")); WebElement src500 = driver.findElement(By.xpath("//*[@id='fourth']/a")); // Locate targets WebElement debitSide = driver.findElement(By.xpath("//*[@id='bank']/li")); WebElement creditSide = driver.findElement(By.xpath("//*[@id='loan']/li")); WebElement amount7 = driver.findElement(By.xpath("//*[@id='amt7']/li")); WebElement amount8 = driver.findElement(By.xpath("//*[@id='amt8']/li")); Actions act = new Actions(driver); act.dragAndDrop(srcBank, debitSide).build().perform(); act.dragAndDrop(srcSales, creditSide).build().perform(); act.dragAndDrop(src5000, amount7).build().perform(); act.dragAndDrop(src500, amount8).build().perform(); // Verify the displayed total String total = driver.findElement(By.xpath("//*[@id='totamt']")).getText(); if (total.equals("5500")) { System.out.println("Test Passed: total matches expected 5500"); } else { System.out.println("Test Failed: actual total " + total); } } } ``` This pattern demonstrates how drag-and-drop can be combined with assertions to validate functional behaviour, not just visual movement. ## Best Practices for Drag and Drop Automation Drag-and-drop tests are among the most flaky scripts in a Selenium suite because they depend on precise mouse coordinates and DOM readiness. The following practices keep them reliable: * **Wait for elements:** Use `WebDriverWait` with `ExpectedConditions.elementToBeClickable` before invoking the drag. * **Prefer dragAndDrop over JavaScript hacks:** Native HTML5 drag events sometimes need a JavaScript fallback, but rely on the Actions API first. * **Scroll the target into view:** An off-screen destination causes silent failures. Use `Actions.scrollToElement` or a JavaScript scroll before dragging. * **Verify the outcome:** Always assert a measurable state change (text, attribute, count) after the drop instead of trusting the action ran. * **Run on a stable resolution:** Pixel-offset drags break if the viewport size differs from the one used to compute the offsets. ## FAQs ⚑ What is drag and drop in Selenium? Drag and drop in Selenium is an automated mouse gesture that picks up a source element and releases it on a target. It is performed through the Actions class using dragAndDrop or dragAndDropBy. πŸš€ What is the difference between dragAndDrop and dragAndDropBy? dragAndDrop accepts the source and destination WebElements. dragAndDropBy takes the source plus x and y pixel offsets, giving precise control when the destination is not a discrete element. πŸ’‘ Why do I need build() and perform() in Selenium drag and drop? build() compiles the chained interactions into a single composite Action, and perform() executes it. Without perform(), the queued steps never run against the browser. πŸ”’ Why does drag and drop fail on HTML5 pages in Selenium? Many HTML5 sites use native drag events that the Actions API does not always trigger. In those cases, dispatch the dragstart, dragover, and drop events through executeScript as a JavaScript fallback. πŸ“ How do I find pixel offsets for dragAndDropBy? Open browser DevTools, hover over the destination, and read the element’s getBoundingClientRect values. Subtract the source position from the target position to get the x and y offsets in pixels. ⏱️ Can drag and drop be combined with waits in Selenium? Yes. Wrap the source and target lookups in WebDriverWait with ExpectedConditions.elementToBeClickable so the drag only runs after both elements are interactive, reducing flakiness in CI runs. πŸ€– How can AI help stabilize Selenium drag-and-drop tests? AI tools provide self-healing locators that adapt when XPaths change, and recommend stable selectors for source and target elements. This cuts maintenance for drag-and-drop suites running across releases. ✍️ Can AI generate Selenium drag-and-drop scripts? Yes. AI coding assistants turn a plain-English scenario such as β€œdrag BANK to the debit side and assert the total” into a complete Actions chain with dragAndDrop, build, perform, and a verification step. #### Summarize this post with: ChatGPT Perplexity Grok Google AI **Stay Updated on AI** **Get Weekly AI Skills, Trends, Actionable Advice.** ##### Sign up for the newsletter Subscribe for Free You have successfully subscribed. Please check your inbox. ![AI-Newsletter](https://www.guru99.com/images/footer-email-avatar-imges-1.png) Chosen by over **350,000+** professionals [Scroll to top ](#wrapper)Scroll to top Γ— Toggle Menu Close Search for: Search ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.guru99.com/#organization","name":"Guru99","sameAs":["https://www.facebook.com/Guru99Official","https://twitter.com/guru99com"],"logo":{"@type":"ImageObject","@id":"https://www.guru99.com/#logo","url":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","contentUrl":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","caption":"Guru99","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://www.guru99.com/#website","url":"https://www.guru99.com","name":"Guru99","publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://www.guru99.com/images/drag-drop-selenium-1.png","url":"https://www.guru99.com/images/drag-drop-selenium-1.png","width":"698","height":"250","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.guru99.com/drag-drop-selenium.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://www.guru99.com","name":"Home"}},{"@type":"ListItem","position":"2","item":{"@id":"https://www.guru99.com/selenium","name":"Selenium"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.guru99.com/drag-drop-selenium.html","name":"How to Drag and Drop in Selenium (Example)"}}]},{"@type":"WebPage","@id":"https://www.guru99.com/drag-drop-selenium.html#webpage","url":"https://www.guru99.com/drag-drop-selenium.html","name":"How to Drag and Drop in Selenium (Example)","dateModified":"2026-06-03T11:14:59+05:30","isPartOf":{"@id":"https://www.guru99.com/#website"},"primaryImageOfPage":{"@id":"https://www.guru99.com/images/drag-drop-selenium-1.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.guru99.com/drag-drop-selenium.html#breadcrumb"}},{"@type":"Person","@id":"https://www.guru99.com/author/admin","name":"Krishna Rungta","url":"https://www.guru99.com/author/admin","image":{"@type":"ImageObject","@id":"https://www.guru99.com/images/krishna-rungta-v2-120x120.png","url":"https://www.guru99.com/images/krishna-rungta-v2-120x120.png","caption":"Krishna Rungta","inLanguage":"en-US"},"worksFor":{"@id":"https://www.guru99.com/#organization"}},{"articleSection":"Selenium","headline":"How to Drag and Drop in Selenium (Example)","description":"How to drag and drop an element using Selenium Webdriver - Some web application, have a functionality to drag web elements and drop them on defined area or element.","keywords":"selenium","speakable":{"@type":"SpeakableSpecification","cssSelector":[".entry-title",".summary"]},"@type":"Article","author":{"@id":"https://www.guru99.com/author/admin","name":"Krishna Rungta"},"dateModified":"2026-06-03T11:14:59+05:30","image":{"@id":"https://www.guru99.com/images/drag-drop-selenium-1.png"},"name":"How to Drag and Drop in Selenium (Example)","subjectOf":[{"@type":"HowTo","name":"How to Drag and Drop in Selenium?","description":"Let\u2019s practically show you the drag and drop of an element using the selenium webdriver with following 3 scenarios","step":[{"@type":"HowToStep","name":"Step 1) Scenario 1: DragAndDrop method","text":"In the following code, we launch the given URL in Firefox browser and then drag the BANK element and drop on the DEBIT SIDE block through dragAndDrop method.","image":"https://www.guru99.com/images/1/102717_0423_DragandDrop2.png","url":"https://www.guru99.com/drag-drop-selenium.html#step1"},{"@type":"HowToStep","name":"Step 2) Scenario 2: DragAndDropBy method","text":"In this scenario, we launch the given URL in the browser and then drag the BANK element and drop on the DEBIT SIDE block through dragAndDropBy method. To dragAndDropBy, we need to find the pixel of the element.","image":"https://www.guru99.com/images/1/102717_0423_DragandDrop5.png","url":"https://www.guru99.com/drag-drop-selenium.html#step2"},{"@type":"HowToStep","name":"Step 3) Scenario 3: Verify the message.","text":"In the following code, we launch the given URL in the browser and then drag the elements like BANK, SALES, 500 and drop on the respective block. Once done we verify the output message.","url":"https://www.guru99.com/drag-drop-selenium.html#step3"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is drag and drop in Selenium?","acceptedAnswer":{"@type":"Answer","text":"Drag and drop in Selenium is an automated mouse gesture that picks up a source element and releases it on a target. It is performed through the Actions class using dragAndDrop or dragAndDropBy."}},{"@type":"Question","name":"What is the difference between dragAndDrop and dragAndDropBy?","acceptedAnswer":{"@type":"Answer","text":"dragAndDrop accepts the source and destination WebElements. dragAndDropBy takes the source plus x and y pixel offsets, giving precise control when the destination is not a discrete element."}},{"@type":"Question","name":"Why do I need build() and perform() in Selenium drag and drop?","acceptedAnswer":{"@type":"Answer","text":"build() compiles the chained interactions into a single composite Action, and perform() executes it. Without perform(), the queued steps never run against the browser."}},{"@type":"Question","name":"Why does drag and drop fail on HTML5 pages in Selenium?","acceptedAnswer":{"@type":"Answer","text":"Many HTML5 sites use native drag events that the Actions API does not always trigger. In those cases, dispatch the dragstart, dragover, and drop events through executeScript as a JavaScript fallback."}},{"@type":"Question","name":"How do I find pixel offsets for dragAndDropBy?","acceptedAnswer":{"@type":"Answer","text":"Open browser DevTools, hover over the destination, and read the element's getBoundingClientRect values. Subtract the source position from the target position to get the x and y offsets in pixels."}},{"@type":"Question","name":"Can drag and drop be combined with waits in Selenium?","acceptedAnswer":{"@type":"Answer","text":"Yes. Wrap the source and target lookups in WebDriverWait with ExpectedConditions.elementToBeClickable so the drag only runs after both elements are interactive, reducing flakiness in CI runs."}},{"@type":"Question","name":"How can AI help stabilize Selenium drag-and-drop tests?","acceptedAnswer":{"@type":"Answer","text":"AI tools provide self-healing locators that adapt when XPaths change, and recommend stable selectors for source and target elements. This cuts maintenance for drag-and-drop suites running across releases."}},{"@type":"Question","name":"Can AI generate Selenium drag-and-drop scripts?","acceptedAnswer":{"@type":"Answer","text":"Yes. AI coding assistants turn a plain-English scenario such as \"drag BANK to the debit side and assert the total\" into a complete Actions chain with dragAndDrop, build, perform, and a verification step."}}]}],"@id":"https://www.guru99.com/drag-drop-selenium.html#schema-250849","isPartOf":{"@id":"https://www.guru99.com/drag-drop-selenium.html#webpage"},"publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.guru99.com/drag-drop-selenium.html#webpage"}}]} ```