PROPOSAL: Create mix-ins for drag, drop, & swipe events

[justinbmeyer]

TLDR We should make it easy to use swipe events and drag and drop events in CanJS.

This was discussed on a recent live stream (14:09) and a previous live stream (5:13).

These events are available in jQuery++, but there is not a modern solution to these in CanJS.

We should make these events available to use in CanJS without requiring a dependency on jQuery. These will be available as mixins similar to the enter and radiochange events:

var domEvents = require('can-dom-events');
var swipeEvents = require('can-event-dom-swipe');

domEvents.addEvents(swipeEvents);

can-event-dom-swipe will add:

• swipe
• swiperight
• swipeleft
• swipeup
• swipedown

Once added, you will be able to use these events in templates:

<img src="{{currentProfile.img}}"
  on:swiperight="like()"
  on:swipeleft="nope()" />

can-event-dom-drag-drop will add:

• dragdown - the mouse cursor is pressed down
• draginit - the drag motion is started
• dragmove - the drag is moved
• dragend - the drag has ended
• dragover - the drag is over a drop point
• dragout - the drag moved out of a drop point
• dropinit - the drag motion is started, drop positions are calculated
• dropover - a drag moves over a drop element, called once as the drop is dragged over the element
• dropout - a drag moves out of the drop element
• dropmove - a drag is moved over a drop element, called repeatedly as the element is moved
• dropon - a drag is released over a drop element
• dropend - the drag motion has completed

These can also be used in templates:

<ul>
  {{# for(result of searchResults) }}
    <li on:draginit="this.videoDrag(scope.element)">{{ result.name }}</li>
  {{/ for }}
</ul>

<div on:dropon="addToQueue()">Playlist</div>

[phillipskevin]

@justinbmeyer's original description:

TLDR jQuery++ still has some good stuff, but the project is no longer actively maintained. We should:

• Pull out the useful stuff into CanJS or standalone projects.
• Remove jQuery as a dependency
• Let people know where to find the new files
• For the custom events, allow folks to make those jQuery events with https://canjs.com/doc/can-dom-events/helpers/add-jquery-events.html

The problem

jQuery++ isn't actively maintained. And it isn't super useful to a modern CanJS application that doesn't need jQuery.

The solution

Lets move out the stuff that is still likely useful into their own projects:

DOM:

• formParams
• range?

EVENTS:

These should be made into can-event-dom-X:

• drag / drop
• hover
• swipe