How to implement working drag and drop in playwright?

I'm using version 1.7.1 of Playwright(cannot update for certain reason) and struggling to implement drag and drop mechanic there. So far I tried this Case I:

const dataTransfert = await page.evaluateHandle(() => new DataTransfer());
await page.dispatchEvent(firstElement, 'dragstart', { dataTransfert });
await page.dispatchEvent(secondElement, 'drop', { dataTransfert }); 

Case II:

await page.hover(firstElement);
await page.mouse.down();
await page.hover(secondElement);
await page.mouse.up();

Case III:

const exampleOneDrag = await page.$(
  `[data-testid="${exampleOne}-drag-icon-button"]`
)
const exampleTwoDrag = await page.$(
  `[data-testid="${exampleTwo}-drag-icon-button"]`
)
const oneBoundingBox = await exampleOneDrag?.boundingBox()
const twoBoundingBox = await exampleTwoDrag?.boundingBox()

if (oneBoundingBox && twoBoundingBox) {
  await page.mouse.move(
    oneBoundingBox.x + oneBoundingBox.width / 2,
    oneBoundingBox.y + oneBoundingBox.height / 2,
    { steps: 5 }
  )
  await page.mouse.down()
  await page.mouse.move(
    twoBoundingBox.x + twoBoundingBox.width / 2,
    twoBoundingBox.y + twoBoundingBox.height / 2,
    { steps: 5 }
  )
  await page.mouse.up()
}

Are there any other suggestions how else it can work?