У меня есть некоторые элементы (виджеты) в div с именем tools. Когда я нажимаю на эти элементы, я хочу перетаскивать их, но не напрямую. Я клонирую элемент в новый элемент с именем newnode, и это то, что я хочу перетаскивать в редакторе.
Трюк, который работает на рабочем столе, заключается в том, чтобы инициировать событие для нового элемента, просто $("#newnode").trigger(e);
$("#tools").on("mousedown touchstart",".widgets", function( e ) {
InitialX=$(this).offset().left;
InitialY=$(this).offset().top;
$("#newnode").css("left",InitialX);
$("#newnode").css("top",InitialY);
$("#newnode").css("width",$(this).width());
$("#newnode").css("height",$(this).height());
$("#newnode>svg").html($($(this).find("g")[0]).clone());
$("#newnode").show();
$("#newnode").trigger(e);
});
Код отлично работает для настольных компьютеров/компьютеров, но не для мобильных устройств. Когда я отправляю триггер на рабочий стол, новые клонированные элементы начинают получать события, будучи новым сфокусированным элементом, но когда я делаю то же самое на мобильных устройствах, инструменты/элементы виджета продолжают получать события
Я также добавил этот код, чтобы увидеть, что происходит с событиями, и да, старые события отправляются на неклонированный элемент.
$("#tools").on("blur focus focusin focusout load resize scroll unload click " +
"dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " +
"mouseleave change select submit keydown keypress keyup error" +
"touchstart touchend touchmove", ".widgets",function(e){
console.info(e.type);
});
#newnode имеет z-index: 100000; заставить быть над исходным элементом.
чтобы увидеть пример на jsfiddle:
https://jsfiddle.net/hamboy75/v0br1cq6/44/
Если вы на компьютере, переключитесь на мобильный в инспекторе, и вы увидите, как он отличается в журнале. Просто нажмите на меню (дублированное появится в сером цвете), не отжимая немного подвигайте мышью.
При просмотре как компьютер newnode будет получать события. При просмотре в качестве мобильного виджет будет получать события.
мне просто нужны события в новом созданном элементе, я не могу отключить инструменты/виджет. Я зафиксировал все события, чтобы увидеть, кто их получал
Можете ли вы создать простой jsfiddle?
@artuc "образец"
@Flash Thunder Я имел в виду * не всю страницу, а ее простую версию. Но вы правы, образец был бы лучше.
я пытаюсь, дай мне пару минут :)
наконец, я изменил все коды и создал свою собственную систему перетаскивания, как примечание для будущих читателей.. не теряйте время с библиотеками перетаскивания, создайте свои собственные методы :). При этом вы решаете, какой объект является тем, который вы перемещаете, получая все события от родителя.
Наконец я нашел решение, которое работает для моих нужд, даже если оно не совсем то, что я хотел (я хотел получать все события в новом клонированном элементе). Вместо добавления следующей строки для получения событий в элементе #newnode
$("#newnode").trigger(e);
я использую следующий код для получения событий на #tools>.widgets, и если #newnode виден, повторно отправьте ему события с помощью триггера.
$("#tools").on("mouseup mousedown mousemove touchstart touchend touchmove touchcancel", ".widgets",function(e){
if ($("#newnode").is(":visible"))
$("#newnode").trigger(e);
});
Пробовали ли вы .off() отвязать прикрепленные события для вновь созданных узлов? api.jquery.com/off