CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Dieter Blancke
Dieter Blancke

Reputation: 82

How do I keep a HTML draggable item from resizing when moving outside of the browser window

I am trying to have a drag and drop between two web pages using the HTML (I set some data on the dataTransfer object) and it all works fine.

The only issue I am running into is that the moment I drag the element out of the source DOM, it greatly reduces in size. It seems to only happen when there are enough elements in the row, making it too wide?

Does anyone know how I should solve this?

The code I use goes as follows:

document.getElementById('test').addEventListener('dragstart', e => {
    event.dataTransfer.setData('resourceType', 'CLIENT');
    event.dataTransfer.setData('resourceId', '123');
});
<table>
  <tbody>
    <tr draggable="true" id="test">
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td> 
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
      <td>THIS IS A TEST</td>
    </tr>
  </tbody>
</table>

Edit: it seems to be on MacOS only (with Brave, Chrome, Edge and Firefox), on Windows (11) it all seems to work as I'd expect, with the drag element retaining it's size (haven't gotten around to test on Linux yet to see how it behaves there)

Upvotes: 0

Views: 52

Answers (0)

Related Questions