Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
Vue seems to mess up dragend event when HTML elements changed as result of drag

Iam working on app which is using vuedraggable library (https://github.com/SortableJS/vue.draggable.next). My arrays between which elements can be dragged are computed property sorted from one big reactive array of all "tasks".

When you drag some element, draggable moves it between those "temporary" arrays. That is detected and as a result tasks property "assignee" is edited. This results in computed property being recalculated and UI is refreshed. This works well. Issue is that probably as result of this UI layouting after drag. When i hook @dragend event on draggable element it is fired on element in place of on where dragging started messing many things up.

Timeline:

-------     -------
| el1 |     | el3 |
-------     -------
-------
| el2 |
-------
  1. I start dragging el1 under el3
  2. Drag ends, both arrays from which columns are generated are recreated (because they are computed property).
  3. @dragend is fired but it fires on el2 instead of actually dragged el1

Same happens with other events like mouseenter. Unfortunatelly as i have mouseenter hooked to custom tooltip it makes this tooltip show with wrong data (el2 data instead of el1 where mouse actually is). This state remains until mouse is moved (even if 1px only). At that point mouseenter is fired again on el1 and correct tooltip is opened.

Unfortunatelly i dont know where i could create repro which could use draggable lib :-(

There is one "hack" which helps hiding this behaiour. In @dragend set flag which ignores single @mouseenter on el2. In that case nothing is shown after drag ends and only when mouse is moved proper tooltip is opened.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda