Droppable in Famous.js?

Question

I am trying to implement a draggable/dropable image in famous.js. That is, if an image is dropped on the correct surface, an event will trigger.

On my draggable image, I am listening for the 'touchend' event. No problem here.

I also have a touchend event connected to my 'target' surface. The problem is that this touchend event doesn't fire when I release the draggable, only the touchend from the draggable is triggered.

My question is: Does Famous.js have a 'droppable' object like in jQuery? If not, how can I detect when an event occurs on top of my target view?

My code is pretty much just the code from this answer, with some event handlers added on.

Answer 1

There is no droppable object yet.. but you can use normal HTML5 DOM events on your surfaces. Here is a working drag and drop example that logs the files that you dropped.

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    content:"Drop Here!",
    properties:{
        border:'4px solid white',
        backgroundColor:'green',
        fontSize:'36px',
        fontFamily:'arial',
        textAlign:'center',
        color:'white',
        lineHeight:'200px'
    }
});

surface.on('dragenter', function(evt){
    evt.preventDefault();
    return false;
});

surface.on('dragleave', function(evt){
    surface.setProperties({border:'4px solid white'});
    evt.preventDefault();
    return false;
});

surface.on('dragover', function(evt){
    surface.setProperties({border:'4px solid black'})
    evt.preventDefault();
    return false;
});

surface.on('drop', function(evt){

    evt.preventDefault();
    evt.stopPropagation();

    surface.setProperties({border:'4px solid white'});

    files = evt.dataTransfer.files;
    console.log(files);
});

context.add(new Modifier({origin:[0.5,0.5]})).add(surface);