将对象拖放到另一个对象上

我在这里是新手，我遇到了一些拖放问题。我试图与一个对象而不是另一个，但它的工作只取决于我如何添加对象。我想要添加最后一个对象，我可以将它移动到其他对象上，并且第一个对象不能做任何事情。我该怎么办？将对象拖放到另一个对象上

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>

来源

2017-02-15 Petrescu Bogdan

你的问题是，当你的光标是直接在物体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>

来源

2017-02-15 18:11:14 arcs

将对象拖放到另一个对象上

回答

相关问题