制作droppable只接受某些拖拽？

Question

我觉得这可能是一个有点复杂的概念来解释我正在做的实际网站的上下文，所以我会解释为什么我要这样做，这应该有助于你理解我是什么后。

基本上我正在制作儿童营养网站。有问题的页面要求孩子们查看一些食物组图像，并在下一页使用可拖动和可放置的图像重新创建它。

右侧的每个食物图像都是可拖动的，左侧的每种颜色顶部都有一个不可见的可放置div。这个想法是，在用户将每一块食物拖到正确的颜色后，然后一个闪屏似乎表明它们是正确的。但只有当每个食物可拖动的东西都在正确的可投放中时，才会发生这种情况。

我对javascript和jQuery缺乏经验，我不知道从哪里开始。任何帮助都将非常感激。

Answer 1

这是一个工作示例 - 请记住，此脚本可能无法满足您的所有要求，但可能有助于您开发所需的内容： http://jsfiddle.net/xu4qoexq/3/

正确的测试顺序是：drag1 = drop1，drag2 = drop2等等。

在drop事件中，我们需要将可拖动项目中的一些信息附加到droppable区域：

$(this).data('item', ui.draggable.data('item'));

在可拖动项目和可放置区域上使用一些数据属性，并在下面的函数中进行比较：

function compareItems() {
    var result = 'correct';
    $('.drop').each(function (i, e) {
        if ($(this).data('item') !== $(this).data('drop')) {
            result = 'wrong';
        }
    });
    alert(result);
    return false;
}

Answer 2

我最终找到了一种方法，使用accept选项，并实现一个计数器来确定何时正确的颜色已满。请参阅工作小提琴here。

我对这种方法唯一的问题是它不会让你做出正确决定以外的任何决定，所以你可能会盲目地试错并完成它。但由于我的申请将涉及儿童，这可能并不是那么重要。