在Famous.js中可投放? [英] Droppable in Famous.js?

问题描述

我正在尝试在Famous.js中实现可拖放图像.也就是说，如果将图像放置在正确的表面上，则会触发事件.

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.

在可拖动的图像上，我正在监听'touchend'事件.没问题.

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

我还有一个touchend事件连接到目标"表面.问题在于，当我释放可拖动对象时，不会触发此touchend事件，只会触发可拖动对象中的touchend.

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.

我的问题是:Famous.js是否像jQuery中一样具有可放置"对象?如果没有，如何检测目标视图顶部何时发生事件?

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.

推荐答案

尚无可放置对象.但是您可以在表面上使用普通的HTML5 DOM事件.这是一个工作的拖放示例，该示例记录了您删除的文件.

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);

这篇关于在Famous.js中可投放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！