0

When using HTML 5 drag and drop, i have noticed that on firefox, the ghost image tends to fly in from far away to the right. I have not been able to reproduce using a small scale example, so i assume it has something to do with the CSS involved. Unfortunately, this is part of a huge application, so teasing out a sandbox wasnt possible, but i included a gif of the behavior. Drag and drop seems to function correctly on chrome and other browsers. This is the code that occurs on dragstart (sectionalGrid is the div that comprises the 5x5 grid)

document.getElementById('sectionalGrid').addEventListener('dragstart', e=> {
   const gridItemRoot = findAncestor(e.target, 'mxt-grid-item');
   e.dataTransfer.setData("grid_x", gridItemRoot.dataset.x);
   e.dataTransfer.setData("grid_y", gridItemRoot.dataset.y);
   this._dragStartMode = 'gridItem';

   document.getElementById('sectionalRemovePiece').classList.add('sectionalHighlightRemove');
});

enter image description here

jekelija
  • 257
  • 4
  • 16
  • Made a jsfiddle for it: https://jsfiddle.net/L9jd0pyx/4/ – jekelija Jul 20 '18 at 19:25
  • Found the issue... using transform to center the parent. Somehow that transform ends up getting applied. See updated jsfiddle: https://jsfiddle.net/L9jd0pyx/14/. So rephrased question... anyone know a solution to this? How can i center the grid without using transform: -50%? – jekelija Jul 20 '18 at 19:34

0 Answers0