将一个对象拖放到另一个对象上
[英]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.