Bug in Nested Vue-Drag-Resize Components

This issue has been tracked since 2019-01-12.

I came across a bug that occurs if you have nested vue-drag-resize components.

What Happens

The child vue-drag-resize will not show it's resize handles.


The bug is caused by the following CSS selected that is not specific enough for nesting:

.inactive .vdr-stick

This selector will be applied to the nested component. E.g. if you click the child component then it correctly gets the .active class applied and the parent gets the .inactive class applied. But, the selector above causes the sticks to not show as the parent has the .inactive class so the selector matches and the child will not have the sticks.

Work Around

In the mean time, I simply worked around it by being more specific in the CSS selector in my app:

.vdr { .widget.active { .vdr-stick { display: block; } } }

Nested children have the .widget class and the .active class is applied by vue-drag-resize so this works.

alexpopovme wrote this answer on 2021-08-26

Working with v2.0.3 for Vue3 here is my quick workaround for child elements:

a CSS rule: div.vdr.active > div.content-container ~ div.vdr-stick { display: block; }
a separate module exporting function deactivateLastClicked to call on click event @clicked="onClicked"

function onClicked (ev) {
// works with this style to display sticks for child only: div.vdr.active > div.content-container ~ div.vdr-stick { display: block; }

let lastClicked = null

export function deactivateLastClicked (el) {
  if (el === lastClicked) return

  if (!lastClicked) {
    lastClicked = el



  lastClicked = el
More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89


Issue Title Created Date Updated Date