Html5拖放在svg元素上

我正在尝试遵循html5拖放教程here。我无法将dragstart事件注册到rect元素上。如果我将事件从draggable更改为mousedown，它会调用handleDragStart处理程序。请忽略代码中的额外空白注册。Html5拖放在svg元素上

的jsfiddle here

<!DOCTYPE html> 
<html><head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <style type="text/css" media="screen"> 
    svg rect { cursor: move; } 
    </style> 
</head><body> 
    <h1>SVG/HTML 5 Example</h1> 
    <svg id="cvs"> 
    <rect draggable="true" x="0" y="10" width="100" height="80" fill="#69c" /> 
    <rect x="50" y="50" width="90" height="50" fill="#c66" />   
    </svg> 
    <script type="text/javascript" src="loc.js"></script> 
</body></html>

loc.js

$(document).ready(function() {  
    function handleDragStart(e) { 
     log("handleDragStart");     
      this.style.opacity = '0.4'; // this ==> e.target is the source node. 
    }; 

    var registercb = function() { 
      $("#cvs > rect").each(function() { 
        $(this).attr('draggable', 'true'); 
       }); 
      $("#cvs > rect").bind('dragstart', handleDragStart);  
      $(window).mousedown(function (e) {   

      });  
      $(window).mousemove(function (e) {     
      }); 
      $(window).mouseup(function (e) { 
       log("mouseup");     
      }); 
     }; 

    function log() { 
     if (window.console && window.console.log) 
     window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' ')); 
    }; 

    registercb(); 
});

来源

2011-05-03 bsr

此行为可能是由以下几个原因造成的：

HTML 5的阻力并下降是一团糟，according to this article。我知道它有点老，但问题似乎还没有解决
jQuery不支持SVG DOM模型。因此它的某些部分可能会起作用，其他部分则不起作用（如offset()或width()）。

我绝对不会依赖HTML5拖动& drop support现在，而是使用库来处理这个问题。如果你想使用SVG，你可以试试Raphaël。如果你也需要jQuery，也许SVG plugin是要走的路。请注意，目前这两个项目都没有积极开发。我知道这并不是一个令人满意的答案，但我也必须学习，jQuery和SVG不能很好地结合在一起。希望有人证明我错了;）。

来源

2011-06-25 13:24:57

+1提拉斐尔，一个非常好的图书馆。 – 2012-06-11 02:26:46

我知道这是一个老问题，我从this other question到达这里，它被标记为这个的一个副本，并且想要添加一个不需要jQuery或任何库的可能解决方案，并且在所有主要浏览器。它基于@AmirHossein Mehrvarzi推荐的this tutorial。

这个小的解决方案不使用拖动事件，只有mousedown,mouseup和mousemove。这是如何工作的：

当鼠标停在矩形上时，它将保存鼠标位置和活动元素。
当鼠标移动时，矩形坐标将更新为新的鼠标位置。
当鼠标启动时，它将重置活动元素。

从上面的问题代码：

var selectedElement = null; 
 
var currentX = 0; 
 
var currentY = 0; 
 

 
$(document).ready(function() { 
 
    
 
    function handleDragStart(e) { 
 
     log("handleDragStart");     
 
     this.style.opacity = '0.4'; // this ==> e.target is the source node. 
 
    }; 
 
    
 
    var registercb = function() { 
 
     
 
     $("#cvs > rect").mousedown(function (e) { 
 
      // save the original values when the user clicks on the element 
 
      currentX = e.clientX; 
 
      currentY = e.clientY; 
 
      selectedElement = e.target; 
 
     }).mousemove(function (e) {  
 
      // if there is an active element, move it around by updating its coordinates   
 
      if (selectedElement) { 
 
       var dx = parseInt(selectedElement.getAttribute("x")) + e.clientX - currentX; 
 
       var dy = parseInt(selectedElement.getAttribute("y")) + e.clientY - currentY; 
 
       currentX = e.clientX; 
 
       currentY = e.clientY; 
 
       selectedElement.setAttribute("x", dx); 
 
       selectedElement.setAttribute("y", dy); 
 
      } 
 
     }).mouseup(function (e) { 
 
      // deactivate element when the mouse is up 
 
      selectedElement = null; 
 
     }); 
 
    }; 
 
    
 
    function log() { 
 
     if (window.console && window.console.log) 
 
      window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' ')); 
 
    }; 
 
    
 
    registercb(); 
 
});

rect { cursor: move; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1>SVG/HTML 5 Example</h1> 
 
<svg id="cvs"> 
 
    <rect x="0" y="10" width="100" height="80" fill="#69c" /> 
 
    <rect x="50" y="50" width="90" height="50" fill="#c66" />   
 
</svg>

您还可以看到这样的事的jsfiddle：http://jsfiddle.net/YNReB/61/

如果你想添加拖拽功能，你可以修改mouseup函数以读取光标位置上的元素（使用document.elementFromPoint(e.clientX, e.clientY)），然后就可以对原始元素和删除的元素执行操作。

来源

2015-06-12 14:47:27

Html5拖放在svg元素上

回答

相关问题