將一個對象拖放到另一個對象上
[英]Drag&drop an object over another object
問題描述
我是新來的人，在拖放方面遇到一些問題。 我試圖將一個對象放在另一個對象上，但是它只能根據我添加對象的方式來工作。 我想要添加的最后一個對象，可以將其移到其他對象上，而第一個不能做任何事情。 我該怎么辦？
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>
1 個解決方案
解決方案1
0 2017-02-15 18:11:14
您的問題是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>
使用JavaScript編碼拖放時，“ Node.appendChild的參數1不是對象。”
[英]“Argument 1 of Node.appendChild is not an object.” while coding a Drag&Drop using JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.