vue-grid-layout icon indicating copy to clipboard operation
vue-grid-layout copied to clipboard

feat: natively handle drag and drop from outside

Open jledentu opened this issue 3 years ago • 0 comments

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 avatar Sep 03 '22 23:09 jledentu