Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

179
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda