javascript - 将 SVG 元素拖到另一个 SVG 元素上

Question

有什么方法可以将一个 SVG 元素拖到另一个 SVG 元素上吗？我试过但喜欢 this教程我只能将我放置的第二个拖到第一个上。我无法毫无问题地将第一个拖到第二个上。有谁知道如何解决这个问题？

这是整个教程:http://www.petercollingridge.co.uk/book/export/html/437

Answer 1

在我看到 @Strat-O 给了你同样的方法之前，我正在写它。

所以这是一个注释示例:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
    
    <style>
      .draggable {
        cursor: move;
      }
    </style>
    
    <script type="text/ecmascript"><![CDATA[
    var selectedElement = 0;
    var currentX = 0;
    var currentY = 0;
    var currentMatrix = 0;

	function cloneToTop(oldEl){
	  // already at top, don't go farther…
	  if(oldEl.atTop==true) return oldEl;
	  // make a copy of this node
	  var el = oldEl.cloneNode(true);
 	  // select all draggable elements, none of them are at top anymore
	  var dragEls= oldEl.ownerDocument.documentElement.querySelectorAll('.draggable');
	  for(i=0; i<dragEls.length; i++){
	  	dragEls[i].atTop=null;
	  	}
	  var parent = oldEl.parentNode;
	  // remove the original node
	  parent.removeChild(oldEl);
	  // insert our new node at top (last element drawn is first visible in svg)
  	  parent.appendChild(el);
  	  // Tell the world that our new element is at Top
	  el.atTop= true;
	  return el;
	  }


    function selectElement(evt) {
      selectedElement = cloneToTop(evt.target);
      currentX = evt.clientX;
      currentY = evt.clientY;
      currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');
    
      for(var i=0; i<currentMatrix.length; i++) {
        currentMatrix[i] = parseFloat(currentMatrix[i]);
      }
      
      selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    }
        
    function moveElement(evt) {
      var dx = evt.clientX - currentX;
      var dy = evt.clientY - currentY;
      currentMatrix[4] += dx;
      currentMatrix[5] += dy;
      
      selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
      currentX = evt.clientX;
      currentY = evt.clientY;
    }
        
    function deselectElement(evt) {
      if(selectedElement != 0){
          selectedElement.removeAttributeNS(null, "onmousemove");
          selectedElement.removeAttributeNS(null, "onmouseout");
          selectedElement.removeAttributeNS(null, "onmouseup");
          selectedElement = 0;
          }
        }
        
    ]]> </script>
    <g>
    <circle/>
    </g>

    <rect x="0.5" y="0.5" width="399" height="199" fill="none" stroke="black"/>
    
    <rect class="draggable" id="blue" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 46 18)" onmousedown="selectElement(evt)"/>
          
    <rect class="draggable" id="green" x="160" y="50" width="50" height="50" fill="green" transform="matrix(1 0 0 1 51 11)" onmousedown="selectElement(evt)"/>

</svg>