javascript - 使 droppables 只接受某些draggables？

Question

我觉得这可能是一个有点复杂的概念，无法脱离我正在做的实际网站的上下文来解释，所以我将解释为什么我想这样做，这应该可以帮助你理解我的意思之后。

基本上我正在制作一个 child 营养网站。该页面要求 children 查看一些食物组图像，并在下一页上使用可拖动和可放置的内容重新创建它。

右侧的每个食物图像都是可拖动的，左侧的每种颜色的顶部都有一个不可见的可放置 div。这个想法是，当用户将每 block 食物拖到正确的颜色上后，然后会出现一个闪屏，表明它们是正确的。但这只有在每个食物可拖动对象位于正确的可放置对象中时才会发生。

我对 javascript 和 jQuery 相当缺乏经验，而且我不知道从哪里开始。任何帮助将不胜感激。

Answer 1

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

正确的测试顺序是:drag1 = drop1、drag2 = drop2 等等。

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

$(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;
}