How to drag the element in selenium's python?

Question

I have the example code to drag the box but it can not work. Could you support me to find the root cause? Many thanks :)

import time

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver import ActionChains


def DragAndDrop():
    driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))
    driver.maximize_window()
    driver.implicitly_wait(10)
    driver.get("https://letcode.in/draggable")
    dragSource = driver.find_element(By.ID, "header")
    print("dragSource outerHTML: " + str(dragSource.get_attribute('outerHTML')))
    dragContainer = driver.find_element(By.XPATH, "//div[@class='example-boundary']")
    print("dragContainer size: " + str(dragContainer.size))

    action = ActionChains(driver)
    # +SOLUTION1
    action.move_by_offset(0.1 * dragContainer.size['width'], 0.1 * dragContainer.size['height']).release().perform()
    # +SOLUTION2
    # action.drag_and_drop_by_offset(dragSource, 15, 15).perform()
    time.sleep(2)

if __name__ == "__main__":
    DragAndDrop()

Both solution 1 and 2 can not work.

Could you support me to find the root cause?

Answer 1

Sometime the general drag and drop doesn't try work below code, This code moves the mouse to the dragSource element then pauses for 1 sec, clicks and holds it then pauses for 1 sec, then moves it by the calculated offsets x and y. After that, it moves the mouse to the dragSource element again and moves it by the same offsets then pauses for 1 sec. Finally, it releases the mouse click to complete the drag and drop action Tested and Was able to drag and drop

import time

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver import ActionChains


def DragAndDrop():
    driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))
    driver.maximize_window()
    driver.implicitly_wait(10)
    driver.get("https://letcode.in/draggable")
    dragSource = driver.find_element(By.ID, "header")
    print("dragSource outerHTML: " + str(dragSource.get_attribute('outerHTML')))
    dragContainer = driver.find_element(By.XPATH, "//div[@class='example-boundary']")
    print("dragContainer size: " + str(dragContainer.size))

    action = ActionChains(driver)
    x = int(dragContainer.size['width'] * 0.1)
    y = int(dragContainer.size['height'] * 0.1)
    action.move_to_element(dragSource).pause(1).click_and_hold(dragSource).pause(1).move_by_offset(x,
                                                                                                   y).move_to_element(
        dragSource).move_by_offset(x, y).pause(1).release().perform()


if __name__ == "__main__":
    DragAndDrop()

Option #2 Also works

action.click_and_hold(dragSource).move_by_offset(x, y).move_by_offset(x, y).release().perform()