Giters

vueuse / vueuse

Collection of essential Vue Composition Utilities for Vue 2 and 3

Home Page:https://vueuse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useDropZone dataTypes filter

alex-martinez opened this issue · comments

commented

Describe the bug

In v10.6.1 useDropZone's dataTypes allowed us filtering based on event.dataTransfer.types, but v10.7.0 removed this ability in PR #3540.

The advantage of using event.dataTransfer.types is on dragstart the data can be set set via event.dataTransfer.setData('text/plain', event.target.id), allowing the dragenter event to filter data types based on the event.dataTransfer.types. However, in v10.7.0 filtering is done using event.dataTransfer.items, which doesn't utilize the setData data.

I propose reverting the changes from PR #3540, or adding back this ability.

Reproductions

v10.6.1
In this example, drag the draggable item over the drop zone and notice how isOverDropZone changes to true.
https://stackblitz.com/edit/vitejs-vite-hg3ssu?file=src%2FApp.vue

v10.7.0
In this example, drag the draggable item over the drop zone and notice how isOverDropZone stays false.
https://stackblitz.com/edit/vitejs-vite-yhkerf?file=src%2FApp.vue

Reproduction

https://stackblitz.com/edit/vitejs-vite-yhkerf?file=src%2FApp.vue

System Info

System:
  OS: macOS 13.6.3
  CPU: (10) arm64 Apple M1 Pro
  Memory: 92.45 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
  npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
Browsers:
  Brave Browser: 123.1.64.116
  Chrome: 123.0.6312.107
  Chrome Canary: 125.0.6398.0
  Safari: 16.6
npmPackages:
  vue: ^3.4.21 => 3.4.21

Used Package Manager

npm

Validations