Getting the surface from Draggable

Question

Please guys, help me out. I have this code:

var image = new ImageSurface({
    size: [300, 300],
    properties: {
        border: '4px solid white'
    }
});

image.setContent('/img/' + _.random(1,7) + '.jpg');

var draggable = new Draggable({scale: 1});
image.pipe(draggable);

draggable.on('end', function(e) {
    // SURFACE????
});

var stateModifier = new StateModifier();

node.add(stateModifier).add(draggable).add(image);

stateModifier.setTransform(
    Transform.translate(100, 10, 0),
    { duration : 1000, curve: Easing.outElastic }
);

How can I get the Surface object from the draggable event? The parameter from the event is just the position.

johntraver · Accepted Answer · 2014-05-16T21:11:00.363

First, I am wondering why you need to get the surface from the event. If you have one draggable per surface, then you could do something with simple data binding.

eg..

var draggable = new Draggable({scale: 1});

draggable.image = image;

draggable.on('end', function(e) {
    var image = this.image;
});

If you really need to get the surface from the event you will have to edit the code that emits the event.

Just for the case of the end event..

Starting at line 129 of Draggable.js

function _handleEnd() {
    if (!this._active) return;
    this.eventOutput.emit('end', {position : this.getPosition()});
}

Could be changed to..

function _handleEnd() {
    if (!this._active) return;
    this.eventOutput.emit('end', {position : this.getPosition(), originalEvent:event });
}

Now you can do..

var draggable = new Draggable({scale: 1});

draggable.on('end', function(e) {
    var image = e.originalEvent.origin;
});

Good Luck!

Thanks John. I knew that I could bind the image to the draggable but I was looking if there was a solution from famo.us api, in case I reuse the draggable for many surfaces. — Lombo Agridoce, May 16 '14 at 21:27
Yea it's not directly supported. Editing the source is not risky in this case, as long as you track your edits. The event object is right there, and can be easily sent along. — johntraver, May 16 '14 at 21:32

Getting the surface from Draggable

1 Answers1