Drag and drop not working in IE

Issue

I have a list of units to be dragged and dropped on SVG canvas. You can see it here.

Units are defined and configured for this operation in the following way:

var units = html.document.querySelectorAll('ul.units li');
units.onDragStart.listen(_onDragStart);
units.onDragEnd.listen(_onDragEnd);

void _onDragStart(html.MouseEvent e) {
    _dragSource = e.target as html.LIElement;
    _dragSource.classes.add('moving');
    e.dataTransfer.effectAllowed = 'move';

    if (isFirefox) {
      e.dataTransfer.setData('text/plain', 'Required for Firefox!');
    }
}

void _onDragEnd(html.MouseEvent e) {
    _dragSource.classes.remove('moving');
}

And SVG canvas has the following definition:

canvas = html.document.querySelector(canvas_id);
canvas.onDragOver.listen(_onDragOver);
canvas.onDrop.listen(_onDrop);

void _onDragOver(html.MouseEvent e) {
    e.preventDefault();
}

void _onDrop(html.MouseEvent e) {
    e.preventDefault();
    html.Element dropTarget = e.target;
    if (dropTarget == canvas && _dragSource != null && _dragSource.classes.contains('moving')) {
      String operatorId = 'operator_${opNumber}';
      var mouseCoordinates = getRelativeMouseCoordinates(e);
      operators[operatorId] = addOperator(operatorId, _dragSource.dataset['unit-type'], mouseCoordinates['x'], mouseCoordinates['y']);
      opNumber += 1;
    }
}

This is working for all the browsers except for IE and Safari on Windows. The problem is I don’t even get any error or exception messages. Do you guys have any ideas?

Solution

IE11 and older doesn’t support HTML5 drag and drop for SVG elements. I made a simple Codepen that you can use to test on different browsers.

You’ll need to do manual hit testing if you want to support drag and drop on SVG elements. If you’re interested, you can take a look at drag-drop.dart. It’s a library of mine that supports cross-browser drag and drop on SVG. Documentation is non-existant, but you can look at the examples and tests to get an idea of how to use it.

Answered By – Dan Schultz

Answer Checked By – David Marino (FlutterFixes Volunteer)