Handling for drop targets?

[colepeters]

I've been digging around the issues and examples looking for solutions for discrete draggable components and drop targets, but haven't been able to find much (aside from some related conversation in #60 about the draggable attribute — apologies if this issue is too close to duplicating that issue). There are some great examples using list reordering, but I'm curious if this library is capable of handling (or if there are plans to handle) events like onDragOver, onDrop — or features that could emulate this behaviour?

(One option I can think of is detecting a draggable element's final position during onDrag({{last}}) and comparing it to my drop target's position to determine a 'dropped' interaction, but this doesn't really account for events like onDragOver for the drop target for example.)

Any insight would be much appreciated!

EDIT: A quick sandbox to better illustrate my situation, albeit without behaviour for dropping the draggable component on the drop target — https://codesandbox.io/embed/fragrant-field-0ybht

[dbismut]

Hey, I’m sorry but unfortunately this lib doesn’t support drag and drop events. I remember trying but draggable creates a ghost that requires a hack to hide, plus some other side effects I can’t remember but I know I had to face. Could you explain the usecase where drag and drop native API doesn’t suffice for what you’re trying to achieve?

[colepeters]

@dbismut Thanks for the fast reply! What I'm after is creating a nicer dragging animation along the lines of the examples I've seen here, as the native DnD API is a little primitive in that regard.

[dbismut]

I’m afraid that would be really tricky to implement. If you ever find a way to make it happen let me know though! Sorry 😥

[colepeters]

@dbismut No worries — I can definitely see how that would be a challenge. Thanks!

[weiliang903]

Hello everyone, I found a solution to simulate drop events that solved my problem perfectly. mdnDocument.elementFromPoint(x, y) can i use 100% mobile browser compatible

  const bind = useGesture(
    {
      onDrag: ({ args: [originalIndex], active, movement: [x, y] }) => {
        const cur = api.current[originalIndex]
        cur.start({ x, y, scale: active ? 1.2 : 1 })
      },
      onDragEnd: ({ args: [originalIndex], xy }) => {
        const cur = api.current[originalIndex]
        const elem = document.elementFromPoint(xy[0], xy[1])
        // console.log('elem', elem)
        if (elem && elem.dataset.receive) {
          console.log('🚀 target', elem)
          cur.start({ visibility: 'hidden' })
        } else {
          cur.start({ x: 0, y: 0, scale: 1 })
        }
      },
    },
  )

 <div className="receive">
   {target.map(item => (
    <div key={item} className="receive-item" data-receive={item} />
  ))}
 </div>