2

我有一个要在 SVG 画布上拖放的单位列表。你可以在这里看到它。

通过以下方式为该操作定义和配置单元：

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');
}

并且 SVG 画布有如下定义：

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;
    }
}

这适用于除 Windows 上的 IE 和 Safari 之外的所有浏览器。问题是我什至没有收到任何错误或异常消息。你们有什么想法吗？

4

2 回答 2

2

IE11 及更早版本不支持 SVG 元素的 HTML5 拖放。我制作了一个简单的Codepen，您可以使用它在不同的浏览器上进行测试。

如果要支持拖放 SVG 元素，则需要进行手动命中测试。如果你有兴趣，可以看看drag-drop.dart。这是我的一个库，支持跨浏览器拖放 SVG。文档不存在，但您可以查看示例和测试以了解如何使用它。

于 2014-03-05T01:25:44.360 回答
0

你试过这个库吗？

https://github.com/marcojakob/dart-html5-dnd

它有助于使用 dnd，而不必担心每个特定浏览器的实现。

于 2014-03-07T01:08:05.237 回答