CODEWITHSUNDEEP
javascriptraphael
MidnightLightning
MidnightLightning

Reputation: 6928

RaphaelJS/Snap.SVG drag events?

Raphaël (and its successor, Snap) both have a drag() method (Raphaël, Snap), and both claim:

Additionally following drag events will be triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move. When element will be dragged over another element drag.over.<id> will be fired as well.

The question is, those additional events are triggered on what? I've tried a document.addEventListener('drag.move.0') and paper.node.addEventListener('drag.move.0') and neither seems to be triggered. What object(s) do I need to listen to, to get those global drag events?

Upvotes: 1

Views: 631

Answers (1)

MidnightLightning
MidnightLightning

Reputation: 6928

Okay, did my own source-diving and found it's a bit tangled, as Ian supposed. Firstly, in Snap, the event names changed to have a snap. prefix (source).

Looking at that source code, Snap is using its own event library ("Eve"), that doesn't use native listeners at all, so events aren't bound to any object, they're just namespaced for the thing you're interested in knowing about:

eve.on('snap.drag.start.0', function(el) {
  console.log('Item 0 started dragging!');
});

The parameter passed to the listener is either the start_scope passed to the original drag() call, or the element being dragged if it wasn't set at that time.

The eve library does allow for wildcards in its scope, so something like:

eve.on('snap.drag.start.*', function(el) {
  console.log('Item ' + el.id + ' started dragging!');
});

Should work to listen to all drag actions.

Upvotes: 2

Related Questions