Javascript Firefox中未触发HTML5拖动事件_Javascript_Html_Firefox_Svg

Javascript Firefox中未触发HTML5拖动事件

javascript html firefox svg

Javascript Firefox中未触发HTML5拖动事件,javascript,html,firefox,svg,Javascript,Html,Firefox,Svg,我在一个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>

我在一个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>

mousedown

和

dragstart

事件正确触发，但是

drag

和

dragend

都没有这样做。大约一年前，我读到一篇文章，建议我必须调用

setData

，才能让

拖动

开火，但这并没有奏效

我如何获得一个合适的HTML5

拖动

，更重要的是，在Firefox中的SVG节点上触发

dragend

事件。不幸的是，SVG元素上不支持HTML5拖动事件（至少在Firefox或Webkit中不支持）。我在拖动和SVG方面也有问题（请检查各种浏览器，有些浏览器有不同的实现），因此使用mousedown实现了我自己的拖动事件，并在处理mousemove事件时进行检查。

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