Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: natively handle drag and drop from outside #707

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

jledentu
Copy link
Contributor

@jledentu jledentu commented Sep 3, 2022

Hi, this PR implements drag & drop from outside, directly in the library.

While I was trying to experiment such feature, I noticed that the related example contained a lot of custom code to make it work. It's not very easy, and not persistent since it relies on internal interfaces ($refs, internal/private methods).

So I modestly propose this feature:

  • a new prop is-droppable says whether the grid can accept drag from outside (i.e native draggable elements)
  • a prop before-drop-over is a callback function used to eventually abort dragover events, or dynamically adapt the size of dragging items
  • an event drop is emitted when dropping an element

About the implementation, in order to handle the drag events in the GridLayout component, I moved calcXY and calcGridColWidth methods in a calculateUtils file in order to expose them (I was inspired by the React Grid Layout library for namings). This allows to not rely on GridItem internal methods.

I also moved the placeholder update, may fix #544.

jledentu and others added 6 commits September 4, 2022 01:15
* feat: Centering the dropping placeholder on the cursor
* Removing unnecessary
* Mutualizing width and height getter function

Co-authored-by: Corentin Pillet <corentin.pillet@energiency.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Drag from outside element render lagging
2 participants