Droppable in Famous.js?
famo.us, jquery
Solution
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);
Problem
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.