將對象拖放到另一個對象上

我在這裏是新手，我遇到了一些拖放問題。我試圖與一個對象而不是另一個，但它的工作只取決於我如何添加對象。我想要添加最後一個對象，我可以將它移動到其他對象上，並且第一個對象不能做任何事情。我該怎麼辦？將對象拖放到另一個對象上

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

將對象拖放到另一個對象上

回答

相關問題