Я нахожусь на моей кривой обучения для Javascript/SVG combo (анимация и создание интерактивных SVG).spawn & drag элементов SVG - подход
Я хотел создать фрагмент кода, в котором элементы меню («инвентарь») можно перетащить на главный экран («холст»), в то время как исходный элемент останется на своем месте (как если бы он переместил копию это от исходного элемента).
Здесь я обработал фрагмент кода, как лучше всего, как я мог: http://codepen.io/cmer41k/pen/f2b5eea274cdde29b0b2dc8a2424a645
Так я вроде удалось сделать что-то, но его багги:
Я мог бы иметь дело с 1 экземпляр и делает его draggable, но тогда я не знаю, как бороться с идентификаторами для всех этих нерестилищных элементов, что вызывает проблемы с перетаскиванием.
Я не понимаю, как заставить его работать бесконечно (чтобы он мог вызвать любую амо нет кругов, перетаскиваемых на холст)
Перетаскиваемые элементы в холсте часто перекрываются, и я не могу подключить слушателей так, как они не пересекаются, так что слушатель на элементе, который я перетаскиваю, будет распространяться «через» любые другие элементы есть; (
Вопрос в основном - кто-то может предложить логику, что я должен поставить в этот фрагмент так, чтобы это не было обременительным. Я уверен, что я что-то здесь не хватает; ((например, оно не должно быть трудно это не так)
HTML:
<body>
<svg id="svg"
height="800"
width="480"
viewbox="0 0 480 800"
preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect id="canvasBackground" width="480" height="480" x="0" y="0"/>
<rect id="inventoryBackground" width="480" height="100" x="0" y="480"/>
<g id="inventory">
<path id="curve4" class="inventory" d="M60,530 A35,35 0 1,1 60,531" />
<path id="curve3" class="inventory" d="M150,530 A35,35 0 1,1 150,531" />
<path id="curve2" class="inventory" d="M240,530 A35,35 0 1,1 240,531" />
<path id="curve1" class="inventory" d="M330,530 A35,35 0 1,1 330,531" />
</g>
<g id="canvas">
</g>
</svg>
</body>
Javascript:
// define meta objects
var drag = null;
// this stores all "curves"-circles
var curves = {};
var canvas = {};
var inventory = {};
window.onload = function() {
// creates the curve-circles in the object and at their initial x,y coords
curves.curve1 = document.getElementById("curve1");
curves.curve1.x = 0;
curves.curve1.y = 0;
curves.curve2 = document.getElementById("curve2");
curves.curve2.x = 0;
curves.curve2.y = 0;
curves.curve3 = document.getElementById("curve3");
curves.curve3.x = 0;
curves.curve3.y = 0;
curves.curve4 = document.getElementById("curve4");
curves.curve4.x = 0;
curves.curve4.y = 0;
canvas = document.getElementById("canvas");
inventory = document.getElementById("inventory");
// attach events listeners
AttachListeners();
}
function AttachListeners() {
var ttt = document.getElementsByClassName('inventory'), i;
for (i = 0; i < ttt.length; i++) {
document.getElementsByClassName("inventory")[i].onmousedown=Drag;
document.getElementsByClassName("inventory")[i].onmousemove=Drag;
document.getElementsByClassName("inventory")[i].onmouseup=Drag;
}
}
// Drag function that needs to be modified;//
function Drag(e) {
e.stopPropagation();
var t = e.target, id = t.id, et = e.type; m = MousePos(e);
if (!drag && (et == "mousedown")) {
if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable?
copy = t.cloneNode(true);
copy.onmousedown=copy.onmousemove=onmouseup=Drag;
inventory.insertBefore(copy, inventory.firstChild);
drag = t;
dPoint = m;
}
if (t.className.baseVal=="draggable") { //if its just draggable class - it can be dragged around
drag = t;
dPoint = m;
}
}
// drag the spawned/copied draggable element now
if (drag && (et == "mousemove")) {
curves[id].x += m.x - dPoint.x;
curves[id].y += m.y - dPoint.y;
dPoint = m;
curves[id].setAttribute("transform", "translate(" +curves[id].x+","+curves[id].y+")");
}
// stop drag
if (drag && (et == "mouseup")) {
t.className.baseVal="draggable";
drag = null;
}
}
// adjust mouse position to the matrix of SVG & screen size
function MousePos(event) {
var p = svg.createSVGPoint();
p.x = event.clientX;
p.y = event.clientY;
var matrix = svg.getScreenCTM();
p = p.matrixTransform(matrix.inverse());
return {
x: p.x,
y: p.y
}
}
Эй Павел, спасибо так много;) Я прошел через это шаг за шагом, и теперь у меня есть гораздо лучше понять, как сделать эти вещи. –