search

cameronhimself / vue-drag-drop

A lightweight Vue wrapper that abstracts away the wonkier parts of the Drag and Drop Browser API
496 stars 83 forks source link

Droppable with UIKit sortable #63

Closed bribar closed 6 years ago

bribar commented 6 years ago

Hi Cameron,

Nice library! This isn't an issue.

I use UIkit sortable and have a droppable element outside of the sortable. https://getuikit.com/docs/sortable

If I drag a (uikit)sortable item by its handle to the droppable element it doesn't trigger any events. The draggable element is within the sortable (uikit)items. I can do a workaround by dragging from other places than the handle, but I was hoping both would work from the same handle.

Any thoughts? Can these work together by the same handle?

Thanks!

cameronhimself commented 6 years ago

Unfortunately I can't think of any way to make this work. The native drag and drop API demands that you drag an explicitly defined draggable element to an explicitly defined dropzone--a draggable nested in something that is draggable by a means other than the native API won't ever trigger any events, to the best of my knowledge.

That said, if you have an example I can take a look at, I might be able to figure something out. It's difficult to think about the problem in the abstract, especially having never used UIKit's sortable. Please reopen if you have something I can take a look at.

bribar commented 6 years ago

Hi Cameron,

Sorry I didn't see that you replied. Here is a simple example

https://jsfiddle.net/bribar/hvvaadk9/1343/

When dragging a list item to the drop zone it would be sweet to trigger the handleDrop event with transfer data.

I was able to accomplish this with jquery ui sortable + drop, but I really don't want to load that library.

Does this help?

bribar commented 5 years ago

@cameronhimself any thoughts?

cameronhimself commented 5 years ago

Thanks for putting together a fiddle. The problem is that UIKit is completely taking over and preventing any regular browser drag and drop events when the handle is grabbed. This is a common means of getting around the limitations and quirks of the browser's drag and drop API--you replace it entirely with your own completely custom functionality that mimics drag and drop. Since this library explicitly and exclusively works with native events, I don't see any way to make it work. I'd be interested to see how you got it to work with jQueryUI's sortable.

Now, the UIKit sortable component does have a stop event for when dragging has stopped, but as far as I can tell it doesn't expose what element it's over at the time. Which makes sense, because it's a reorderable list, not a generic drag and drop solution. That said, you could theoretically do some witchcraft where you get the X/Y coords of the stop event (which I think are available) and use those to see if it's over the dropzone, then manually trigger a drop event or something. But that's obviously extremely hacky, and I can't even say with certainty that it would work.