jquery - 可放入 Famous.js 中吗？

Question

我正在尝试在known.js 中实现可拖动/可放置的图像。也就是说，如果图像掉落到正确的表面上，就会触发一个事件。

在我的可拖动图像上，我正在监听“touchend”事件。这里没问题。

我还有一个 touchend 事件连接到我的“目标”表面。问题是当我释放可拖动对象时，此 touchend 事件不会触发，仅触发可拖动对象的 touchend 。

我的问题是:Famous.js 是否有像 jQuery 中那样的“可放置”对象？如果没有，我如何检测目标 View 顶部何时发生事件？

我的代码几乎就是 this answer 中的代码，添加了一些事件处理程序。

Answer 1

目前还没有可放置的对象..但您可以在表面上使用普通的 HTML5 DOM 事件。这是一个有效的拖放示例，用于记录您放置的文件。

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