dropzone to support dropmove event

[Izhaki]

Thanks for an excellent library that is exceptionally well written.

This is not exactly an issue, as I can easily work around it (and possibly I've missed something and you can already do it). But anyway I thought to impart knowledge and mention the following.

Drop abstractions

Nearly all DD libraries use draggables and dropzones - this is highly sensible. But if you really think about it from a software design perspective, you'll find that drops has two kinds:

• Drop within - when the draggable is dropped within a container (or an element).
• Drop in-between - when the draggable is dropped between two containers (or two elements).

TreeGrid example

For instance, I'm working on a tree-grid library where the widget may be used as a traditional tree (with some extra columns if one wishes) or as a table.

In both cases, when dragging a row (or a tree node) the drop is performed between two other rows (or tree nodes). In the case of trees at least, there can be an arbitrary amount of drop locations below or above each node (most notably, dropping below the bottom node will involve as many drop positions as the level of the node).

Thus, it is little-elegant to render a multitude of drop zones - it is much more sensible for the tree (or the table) to serve as a single drop zone that works out where drop is allowed as the use drags a proxy. Such single drop zone is also in charge of animations.

The request

It seems that at the moment there is no way for a dropzone to receive dragmove events. Given the above, I think such feature is sensible.

[taye]

Thanks for the request!

dragmove events for dropzones would be useful. The events would need a different name so that dropzones which are also draggables don't think that they're being dragged when something else is being dragged over them. How about "dropmove"? ¯(°_o)/¯

I think that having an event object like this would be good:

{
  target: dropzoneElement,
  dragmove: dragmoveEvent,
  type: 'dropmove'
}

[Izhaki]

Yep, dropmove distinction is obviously a must.

Whatever the event object's like, I envision this will be how you use it:

interact('.dropzone')
    // enable draggables to be dropped into this
    .dropzone(true)
    // listen for drop related events
    .on('dropmove', function (event) {
        // Do something here
    });

Just as a final note, I assume dropmove events will only be fired between the dropzone's dragEnter and dragLeave events.

[taye]

I've added the dropmove event in #71. Please try it and let me know how it goes.

https://raw.githubusercontent.com/taye/interact.js/dropmove-event/interact.js

[Izhaki]

Thanks for implementing this so quickly; all seem to be working.

Just one comment... having looked at setOnEvents it seems that currently the following syntax isn't supported:

        interact( element[0] ).dropzone({
            dropmove:  ctrl.onDropMove,
            drop:      ctrl.onDrop
        });

Although not a big deal, perhaps this is something worth adding.

[taye]

Thanks for mentioning that. It should be fixed now.