Как отследить перемещение элемента?

Question

[Дмитрий]

Как в целом можно отследить перемещение элемента? Например, элемент может быть перемещен различными способами, первое что приходит в голову: позиционирование, трансформация, отрицательный margin, находясь внутри flex контейнера (когда родитель меняет свойство) и т.д. и т.п.

Comments

[Ankhena]

Что провоцирует эти перемещения?

[Дмитрий]

Ankhena, По хорошему, все что способно на это. Как описано в вопросе. Но сейчас, я кажется начинаю подозревать что это одна из самых больших проблем... Через стили и классы - это понятно! Но как быть с родителями и селекторами дочерних элементов, непонятно, которые могут влиять на отслеживаемые элемент, непонятно.

[Ankhena]

Дмитрий, to` ещё раз: что запускает эти трансформации, отрицательные margin и всё, что вы перечислили?

[historydev]

https://habr.com/ru/companies/ruvds/articles/351256/

[Дмитрий]

Ankhena, Я же уже написал! Все то, что может спровоцировать смещение\перемещение элемента на странице. Трансформация, отрицательный margin, случае когда родитель является grid или flex и любые другие способы\случаи.

[Дмитрий]

historydev, MutationObserver - позволит отследить только изменение в атрибутах. Ну а если именно родитель является причиной смещения? Или скажет, смещение элемента произошло через css селектор дочерних элементов под который подпадает отслеживаемый элемент, что в этом случае?

[Ankhena]

Дмитрий, да что ш такое..
Вы открыли страницу. Читаете. И тут хоп всё сдвинулось, потому что заголовкам прилетел margin. С чего он поменяется? Что там происходит? Где начало у этой истории?

[Дмитрий]

Ankhena, Нет у этой истории начала! Тк. это плагин. Есть элемент - который сложно позиционируется на странице, относительно нескольких произвольных элементов, которые, в свою очередь, определяет пользователь. И вот, у нас есть элемент который позиционируется и несколько элементов относительно которых происходит позиционирование.
Едем дальше! Проблем с resize нет! Все прекрасно работает ибо методов для этого js предоставляет достаточно. НО! Что если один из элементов относительно которого происходи позиционирование, не меняя своего размера, меняет положение, будь то transform translate, отрицательный margin или он находится внутри сетки которая, допустим, увеличила gap и элемент сдвинутся (не меняя размера). Короче, я не знаю на что я опять наделся когда пришел на toster... Но еще вчера под вечер, стало ясно что это одна из проблем у которой пока что нет адекватного решения. К обсуждению на w3 был предложен механизм rectObserver с помощью которого, как предполагается, можно будет подписаться на изменение положения и\или размера (хотя уже есть resize). Самый просто пример который я могу Вам предложить к опыту. берете два элемента, первый кнопка, второй блок (самый простой dropdown). Позиционируете блок относительно кнопки. Попробуйте теперь заставить блок "бегать" за кнопкой изменяя ее положение различными методами. Хотя... возможно, это не самый удачный вариант для примера. Подводя итоги, ResizeObserver полюбому, для плагина опция autoUpdatePos (Boolean) и updateInterval (Int), если autoUpdatePos огда getBoundingClientRect + setInterval с updateInterval. И пусть пользователь сам решает, а надо ли ему это, если надо, то как часто.
Всем спасибо!

[szQocks]

Дмитрий, ты не верно подходишь к решению задачи, которая стоит перед тобой. Я уверен что там всё намного проще чем кажется на первый взгляд, просто ты мыслишь не в том направлении.

На сколько я понял из всего что ты написал - ты хочешь при dropdown отследить элемент какими-то необычными способами.

Попробуйте теперь заставить блок "бегать" за кнопкой изменяя ее положение различными методами.

- это похоже на группировку, если один должен бегать якобы за другим, они должны быть в едином блоке, и перемещать уже не единый блок, а целую группу, что бы казалось что один бегает за другим.

в 99.99999999999999999999999999999999999999999% - нет той задачи, которая бы требовала отслеживать изменение gap ( стиль )

[szQocks]

Дмитрий, вообще отслеживание одновременно, стили у контейнера, тот же gap, и всех потомков а точнее все их стили, типа margin, width и т.д ( ну тут до бесконечности можно перечислять ) - это невероятно, очень трудозатратная операция для браузера, той же оперативки, у тебя не то что сайт будет лагать, а целый браузер.

можно это конечно через debounce или throttle обернуть, но всё равно - это идея не хорошая

[Дмитрий]

ты хочешь при dropdown отследить элемент какими-то необычными способами.

Почему я знал что пример с dropdown (как и любой другой упрощенный), приведет к рассуждения и поиску решению в ключе dropdown.

в 99.99999999999999999999999999999999999999999% - нет той задачи, которая бы требовала отслеживать изменение gap ( стиль )

вообще отслеживание одновременно, стили у контейнера, тот же gap, и всех потомков а точнее все их стили, типа margin, width и т.д ( ну тут до бесконечности можно перечислять )

Причем тут gap, свойства и стили всех родителей и потомков??? В конце концов, причем тут "width" - который относится к resize, с котором проблем нет!

это невероятно, очень трудозатратная операция для браузера, той же оперативки, у тебя не то что сайт будет лагать, а целый браузер.

Бред сивой кобылы! Для этого нет нужды отслеживать все! Тот же ResizeObserver - способен без особых трудозатрат отследить изменения размеров конкретного элемента. getBoundingClientRect - без проблем способен вернуть позицию конкретного элемента. getBoundingClientRect - это даже в самом плохом варианте десятки тысяч (а то и сотен) операций в секунду.

ты не верно подходишь к решению задачи, которая стоит перед тобой.

Похоже что да! И мне следовало бы взять у тебя уроки!

[szQocks]

Дмитрий,

Причем тут gap, свойства и стили всех родителей и потомков???

Что если один из элементов относительно которого происходи позиционирование, не меняя своего размера, меняет положение, будь то transform translate, отрицательный margin или он находится внутри сетки которая, допустим, увеличила gap

ты сам не знаешь что хочешь, как я и сказал ранее - скорее всего задача решается проще чем твоя идея, с отслеживанием всего этого, marign, gap и т.д

если покажешь демо, или описание задачи - я попробую её понять, и возможно подскажу нормальное решение а не то что хочешь сделать ты

только не надо мне повторять именно твои мысли - для решение этой задачи, а расскажи саму задачу ( ты же как-то пришёл к мыслям которые ты пишешь здесь, не с неба же их взял )

Answer 1

[Nik Faraday]

Опираясь на некоторые детали в комментариях к вопросу, могу предположить, что вы могли бы отслеживать саму позицию элемента через JS относительно некоторых веще:

• Экрана/Монитора
  
• Родительский элемент
  
• Документ
  

Это можно сделать путём того же обсервера, который будет отслеживать изменения этих свойств. Это могут быть таки свойства как ClientHeight/Width и т.д.

Comments

[Дмитрий]

Так оно и есть, Вы все правильно поняли! Конечно, странно что Вам понадобилось прочитать все комментарии... Ведь сам вопрос звучит: "Как отследить перемещение элемента?" Я не знаю, может это проблема менталитета... Но по моему, сам вопрос отражает суть и вполне ясен для понимания. Ведь "перемещение элемента" - автоматически подразумевает изменение его позиции относительно той, которая была до перемещения. Может быть более корректно было бы написать так: Как отследить смену позиции элемента? Не знаю... Еще более странным является тот факт, что людям, по всей видимости, тяжело понять концепцию, принять то, что у элемента - может быть изменена его начальная позиция, без изменения размеров и что для этого необязательное прямое воздействие. Например: есть у Вас accordion, вы отрыли один из пунктов, нижележащие элементы (находящиеся под accordion-ом) - поменяли позицию. Изменили ли они свой размер? Необязательно! Но позицию ведь поменяли! Что тут сложного для понимания... Или вот еще пример: Есть у вас блок, по наведению на который ему присваивается некоторый margin, padding и\или translate или он позиционирован как relative и ему присваивается top, вот вы хотите так, у Вас некое стилистическое решение, сейчас опустим детали зачем и почему, просто нужно принять это факт, ведь подобное с высокой вероятностью может встретиться. Так вот, вы наводите на этот элемент вследствие чего, соседние элементы - могут быть смещены, как и непосредственно сам элемент. Элементы - опять не изменили своих размеров, но поменяли позицию и поменяют ее вновь, когда hover - будет потерян.

В комментариях я разместил выбранное мною решение. Пожалуй, единственно возможное на данный момент, если не придираться к деталям реализации. И да, как Вы уже упомянули, считать нужно непосредственно от самого документа. В противном случае, будет влиять прокрутка.

[Nik Faraday]

Дмитрий, сам вопрос "перемещение элемента" звучит достаточно абстрактно. Тот же d&d можно юзать

[Дмитрий]

Nik Faraday, Ну, в свое оправдание скажу что я таки попытался разъяснить в чем же все таки суть. Но не суть! (каламбур) На самом деле, я опять занялся ерундой! Ибо еще вчера было ясно, что все это - одна сплошная проблема о которой говорят. Но я почему-то решил что мне поможет, прости господи, toster... Может быть, это такая хитрая форма прокрастинации, тип. "я ищу оптимальное решение!". Потому, будут гуглить сотни страниц и ждать пока мне на русскоязычном вопроснике помогут решить проблему о которой еще в 2017 году были разговоры среди людей которые создают, предлагают и принимают веб-стандарты... Наивно и бредово!