search

kutlugsahin / vue-smooth-dnd

Vue wrapper components for smooth-dnd
MIT License
1.73k stars 250 forks source link

Cannot drop card groups in the Card Board demo #120

Open Symbolk opened 5 years ago

Symbolk commented 5 years ago

I feel a bit strange about the Card Board demo (https://kutlugsahin.github.io/vue-smooth-dnd/#/cards).

The cards can be moved properly across different groups, it seems that the group can be drag&drop too, but when I try to move them, they can be moved but cannot be dropped (Chrome @latest)!

However, when I try this demo on my phone with mobile Chrome, or even switch the page to mobile view in the developer tool of desktop Chrome, the group can be dropped correctly! That's why I feel strange.

Symbolk commented 5 years ago

As described in #91 , it seems to be related with the css height. When I change the device to display, the height changes so that the container can be moved.

Temporary solution is simply to reduce the number of children cards in this line: https://github.com/kutlugsahin/vue-smooth-dnd/blob/9624b2dd2408dc199b60fe32b21a55eb46ba60dd/demo/src/pages/cards.vue#L79

For example, changing the (Math.random() * 10) to (Math.random() * 5) solves it.

mrauhu commented 5 years ago

@kutlugsahin @Symbolk

Fix for cards demo vue-smooth-dnd/demo/src/pages/cards.vue:

.card-scene {
  height: 100vh;
}
Symbolk commented 5 years ago

@mrauhu Thanks! Please also update the demo page: https://kutlugsahin.github.io/vue-smooth-dnd/#/cards)