Question

我在HTML文件中有以下内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script type='text/javascript' src='test.js'></script>
  </head>
  <body>
    <svg width='570' height='500' style='border: 2px solid #000;'>
      <rect id='test-rect' class='a-rect' draggable='true' 
        stroke-width='1' stroke='#000' fill='#fff' 
        ry='10' rx='10' r='10' 
        height='119' width='168' y='169' x='282'>
      </rect>
    </svg>
  </body>
</html>

以及test.js

中的以下内容

document.addEventListener('DOMContentLoaded', function () {
    var elem = document.getElementById('test-rect');

    elem.addEventListener('mousedown', function (event) {
        console.log('You mouse-downed on a \' SVG node!', event);
    });

    elem.addEventListener('dragstart', function (event) {
        event.dataTransfer.effectAllowed = 'all';
        event.dataTransfer.setData('text/html', 'node');
        console.log('And now you\'re DRAGGIN\' a SVG node!', event);
    });

    elem.addEventListener('drag', function (event) {
        console.log('Still doin\' it!', event);
    });

    elem.addEventListener('dragend', function (event) {
        console.log('Done!', event);
    });
});

mousedown和dragstart事件正在正常启动，但drag和dragend都没有做同样的事情。我从大约一年前读过this question表示我必须致电setData才能drag开火，但是没有这样做。

如何在Firefox中的SVG节点上获取正确的HTML5 drag，更重要的是，dragend事件触发？

HTML5中的HTML5拖动事件未在Firefox中触发

0 个答案: