将一个对象拖放到另一个对象上
[英]Drag&drop an object over another object
问题描述
I'm new here and I have some problems with drag and drop. 
我是新来的人，在拖放方面遇到一些问题。 I'm trying to come with an object over another, but it work only depending how I added the object. 我试图将一个对象放在另一个对象上，但是它只能根据我添加对象的方式来工作。 I want with the last object that I add, I can move it over other objects and with the first can't do nothing. 我想要添加的最后一个对象，可以将其移到其他对象上，而第一个不能做任何事情。 what should I do? 我该怎么办？
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
Your problem is that onmousemove is only triggered when your cursor is directly over the object. 您的问题是onmousemove仅在光标直接位于对象上方时触发。 If another element is in front, it won't work. 如果另一个元素在前面，它将无法工作。 Also mouseout is triggered whenever you hover over one other element. 每当将鼠标悬停在另一个元素上时，也会触发mouseout 。
To simplify it I added the listeners on the svg element and always refer to selectedElement . 为了简化它，我在svg元素上添加了侦听器，并始终引用selectedElement 。
I also switched from the mosueout listener to the mouseleave one, because this one doesn't trigger when you hover over a child. 我还从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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.