У меня есть несколько элементов svg use
внутри элемента svg
с обработчиками событий для touchstart/move/end
, прикрепленными к элементу svg
. Когда пользователь касается элемента svg use
на экране и перемещает палец, элемент перемещается по экрану по желанию.
//Exact code in fiddle is different, this is example
<svg id="parent" viewBox="0 0 1000 1000">
<use href="test.svg" width="100" height="100" x="100" y="100">
<use href="test2.svg" width="100" height="100" x="100" y="100">
</svg>
//Exact code in fiddle is different, this is example
let parentSVG = document.getElementById("parent");
parentSVG.addEventListener('touchstart', Handle_DragStart); //mousedown too
parentSVG.addEventListener('touchmove', Handle_Drag); //mousemove too
parentSVG.addEventListener('touchend', Handle_DragEnd); //mouseup too
Проблема в том, что я хочу, чтобы перетаскиваемый элемент всегда рисовался поверх других, а элементы рисовались в порядке DOM (сначала первый элемент в DOM). Чтобы справиться с этим, в моем обработчике событий touchstart
я перемещаю элемент, к которому прикоснулся пользователь, в конец списка с помощью appendChild()
:
//Exact code in fiddle is different, this is example
let mid_move = false;
function Handle_DragStart (event)
{
//Needed to ignore other touch events while dragging
if(mid_move)
return;
mid_move = true;
//The event.target is the svg use element.
//It is already attached to the parentSVG.
//This just moves it to the end of the list of children.
parentSVG.appendChild(event.target);
}
Это прекрасно работает для mousedown
и mousemove
, но не для touchstart
и touchmove
. После этого событие touchmove
не срабатывает, пока я не коснусь экрана во второй раз, предположительно потому, что вызов appendChild()
в обработчике touchstart
в этот момент ничего не меняет?
Я аннулирую событие? Как мне поступить в этой ситуации?
ИЗМЕНИТЬ:
Пример JSFiddle. //Установите для append_child значение true/false, чтобы увидеть поведение
test.svg
иtest2.svg
- person Jan Stránský   schedule 02.09.2020use
послеappendChild
их. Я попытался отложитьappendChild
сsetTimout
, хорошо работал до тех пор, пока DOM не изменится. НО, это работает для простогоrect
. Например использование невидимых обложек и регулировка положения видимых элементов в соответствии с перетаскиваемой обложкой вариант для вас? - person Jan Stránský   schedule 03.09.2020