我有一个带有foreignObject
的svg元素,里面有一些div。我希望能够拖动该对象。唯一的问题是:我无法让它发挥作用。
我找到了几个SO答案并尝试实施它们。但它们都没有奏效,因为我一次又一次地得到同样的错误:
Uncaught TypeError: undefined is not a function
或
evt is not defined
我必须关注this网站上的代码(SO回答指出):
<svg id="bewaar_holder" xmlns="http://www.w3.org/2000/svg" width="800" height="500" onload="Init(evt)" onmousedown="Grab(evt)" onmousemove="Drag(evt)" onmouseup="Drop(evt)"></svg>
var SVGDocument = null;
var SVGRoot = null;
var TrueCoords = null;
var GrabPoint = null;
var BackDrop = null;
var DragTarget = null;
function Init(evt) {
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
// these svg points hold x and y values...
// very handy, but they do not display on the screen (just so you know)
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
// this will serve as the canvas over which items are dragged.
// having the drag events occur on the mousemove over a backdrop
// (instead of the dragged element) prevents the dragged element
// from being inadvertantly dropped when the mouse is moved rapidly
BackDrop = SVGDocument.getElementById('BackDrop');
}
function Grab(evt) {
// find out which element we moused down on
var targetElement = evt.target;
// you cannot drag the background itself, so ignore any attempts to mouse down on it
if (BackDrop != targetElement) {
//set the item moused down on as the element to be dragged
DragTarget = targetElement;
// move this element to the "top" of the display, so it is (almost)
// always over other elements (exception: in this case, elements that are
// "in the folder" (children of the folder group) with only maintain
// hierarchy within that group
DragTarget.parentNode.appendChild(DragTarget);
// turn off all pointer events to the dragged element, this does 2 things:
// 1) allows us to drag text elements without selecting the text
// 2) allows us to find out where the dragged element is dropped (see Drop)
DragTarget.setAttributeNS(null, 'pointer-events', 'none');
// we need to find the current position and translation of the grabbed element,
// so that we only apply the differential between the current location
// and the new location
var transMatrix = DragTarget.getCTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
}
};
function Drag(evt) {
// account for zooming and panning
GetTrueCoords(evt);
// if we don't currently have an element in tow, don't do anything
if (DragTarget) {
// account for the offset between the element's origin and the
// exact place we grabbed it... this way, the drag will look more natural
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
// apply a new tranform translation to the dragged element, to display
// it in its new location
DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
}
};
function Drop(evt) {
// if we aren't currently dragging an element, don't do anything
if (DragTarget) {
// since the element currently being dragged has its pointer-events turned off,
// we are afforded the opportunity to find out the element it's being dropped on
var targetElement = evt.target;
// turn the pointer-events back on, so we can grab this item later
DragTarget.setAttributeNS(null, 'pointer-events', 'all');
if ('Folder' == targetElement.parentNode.id) {
// if the dragged element is dropped on an element that is a child
// of the folder group, it is inserted as a child of that group
targetElement.parentNode.appendChild(DragTarget);
alert(DragTarget.id + ' has been dropped into a folder, and has been inserted as a child of the containing group.');
} else {
// for this example, you cannot drag an item out of the folder once it's in there;
// however, you could just as easily do so here
alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id);
}
// set the global variable to null, so nothing will be dragged until we
// grab the next element
DragTarget = null;
}
};
function GetTrueCoords(evt) {
// find the current zoom level and pan setting, and adjust the reported
// mouse position accordingly
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x) / newScale;
TrueCoords.y = (evt.clientY - translation.y) / newScale;
};
但是我收到了这个错误:
Uncaught TypeError: undefined is not a function
on line: TrueCoords = SVGRoot.createSVGPoint();
当我记录evt
值时,Chrome调试器会提供以下输出:
还有一些我不明白的东西......在第一行srcElement
确实有价值,但当我扩展事件时,它没有得到{ {1}}了......
所以我没有线索。我之前从未与svg合作,而且我没有JS大师。所以我希望你们知道我做错了什么......
答案 0 :(得分:1)
不太确定它应该做什么,但这将消除错误......你可以拖放,我只是不确定背景应该是什么,如果它的一部分相同的svg或其他东西。
问题似乎是SVGRoot变成了html元素而不是svg(也许是因为它在一个小提琴上,不确定),所以我把它改为选择它的ID。
SVGRoot = document.getElementById('bewaar_holder');
和
BackDrop = document.getElementById('BackDrop');
你可能想要改变这些。