vue-grid-layout
vue-grid-layout copied to clipboard
feat: natively handle drag and drop from outside
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-droppablesays whether the grid can accept drag from outside (i.e native draggable elements) - a prop
before-drop-overis a callback function used to eventually abort dragover events, or dynamically adapt the size of dragging items - an event
dropis 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.