オブジェクトを別のオブジェクトにドラッグ＆ドロップする

私はここで新しいです。私はドラッグアンドドロップでいくつか問題があります。私は別のオブジェクト上にオブジェクトを持って来ようとしていますが、オブジェクトをどのように追加したかによってのみ機能します。私は最後に追加したオブジェクトを追加したい、それを他のオブジェクトに移動することができ、最初のものは何もできません。私は何をすべきか？オブジェクトを別のオブジェクトにドラッグ＆ドロップする

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にのみトリガされていることです。別の要素が前面にある場合、それは機能しません。他の1つの要素の上にマウスを置くと、いつでも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

オブジェクトを別のオブジェクトにドラッグ＆ドロップする

答えて

関連する問題