title: playwright drag and drop
body: <p>Trying to test some drag and drop functionality, looks like playwright doesn't have drag and drop functionality so I'm using <code>mouse.move()</code>, <code>mouse.down()</code> &amp; <code>mouse.up()</code>.</p>
  <p>However my attempts seem to be failing, the target is not being moved. Code below:</p>
  <pre class="lang-js prettyprint-override"><code>test(&quot;drag and drop test&quot;, async () =&gt; {
    await page.goto(&quot;https://www.w3schools.com/html/html5_draganddrop.asp&quot;);
    await page.waitForSelector(&quot;#accept-choices&quot;);
    await page.click(&quot;#accept-choices&quot;);
    await page.waitForSelector(&quot;#div1&quot;);
    let xStart, yStart, xFinish, yFinish, elementHandle, rect;
    elementHandle = await page.$(&quot;#div1&quot;);
    rect = await elementHandle.boundingBox();
    xStart = rect.x + rect.width / 2;
    yStart = rect.y + rect.height / 2;
    elementHandle = await page.$(&quot;#div2&quot;);
    rect = await elementHandle.boundingBox();
    xFinish = rect.x + rect.width / 2;
    yFinish = rect.y + rect.height / 2;
    console.log(`move from (${xStart}, ${yStart}) to (${xFinish},${yFinish})`);
    await page.screenshot({ path: &quot;before drag.png&quot; });
    await page.mouse.move(xStart, yStart);
    await page.mouse.down();
    await page.mouse.move(xFinish, yFinish);
    await page.mouse.up();
    await page.screenshot({ path: &quot;after drag.png&quot; });
  });
  </code></pre>