Question

我是新来的，拖拉有一些问题。我试图将一个对象与另一个对象一起使用，但它只能依赖于我添加对象的方式。我希望我添加的最后一个对象，我可以将其移动到其他对象上，并且第一个不能做任何事情。我该怎么办？

var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;

function selectElement(evt) {

  selectedElement = 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) {
  dx = evt.clientX - currentX;
  dy = evt.clientY - currentY;
  currentMatrix[4] += dx;
  currentMatrix[5] += dy;
  newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

  selectedElement.setAttributeNS(null, "transform", newMatrix);
  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;
  }
}

#draggable {
  cursor: move;
}
#draggable.hover {
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
</head>


<body>

  <svg height="600" width="600">
    <circle id="draggable" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)" />Sorry, your browser does not support inline SVG.
    <circle id="draggable" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)" />
    <rect id="draggable" x="10" y="220" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)" />

    <rect id="draggable" x="10" y="320" width="100" height="100" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)" />




  </svg>

</body>

</html>

Answer 1

您的问题是onmousemove仅在光标直接位于对象上时触发。如果另一个元素在前面，它将无法工作。每当您将鼠标悬停在另一个元素上时，也会触发mouseout。

为了简化它，我在svg元素上添加了侦听器，并始终引用selectedElement。

我也从mosueout监听器切换到mouseleave监听器，因为当你将鼠标悬停在一个孩子上时，这个监听器不会触发。

var container = document.getElementById('container');
var selectedElement = 0;
var currentX = 0;
var currentY = 0;
var currentMatrix = 0;

function selectElement(evt) {

  selectedElement = 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]);
  }
  
}

container.addEventListener("mousemove", function(evt) {
  if (selectedElement != 0) {
      dx = evt.clientX - currentX;
      dy = evt.clientY - currentY;
      currentMatrix[4] += dx;
      currentMatrix[5] += dy;
      newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

      selectedElement.setAttributeNS(null, "transform", newMatrix);
      currentX = evt.clientX;
      currentY = evt.clientY;
  }
});

container.addEventListener("mouseleave", deselectElement)
container.addEventListener("mouseup", deselectElement)
function deselectElement(evt) {
    selectedElement = 0;
}

#draggable{
cursor:move;

}
#draggable.hover
{
background-color:red;
}

<svg height="600" width="600" id="container"  >
  <circle id="draggable" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" transform="matrix(1 0 0 1 0 0)"

      onmousedown="selectElement(evt)"/>
  Sorry, your browser does not support inline SVG.  
   <circle id="draggable" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" transform="matrix(1 0 0 1 0 0)"

      onmousedown="selectElement(evt)"/>
   <rect id="draggable" x="10" y="220" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"  transform="matrix(1 0 0 1 0 0)"

      onmousedown="selectElement(evt)" />
   
   <rect id="draggable" x="10" y="320" width="100" height="100" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)"  transform="matrix(1 0 0 1 0 0)"
      onmousedown="selectElement(evt)" />

</svg>

将对象拖放到另一个对象

1 个答案: