让 droppables 只接受某些 draggables？

Question

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

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

右边的每个食物图像都是可拖动的，左边的每种颜色在顶部都有一个不可见的可放置 div。这个想法是，在用户将每块食物拖到正确的颜色后，然后会出现一个启动画面，表明它们是正确的。但这只有在 each food draggable 位于正确的 droppable 中才会发生。

我对 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;
}

Answer 2

我最终想出了一个方法，使用 accept 选项，并实现一个计数器来确定正确的颜色何时填满。见工作 fiddle here.

我对这种方法的唯一问题是它不会让你做出正确决定以外的任何决定，所以你可以盲目地反复试验来完成它。但由于我的应用程序将与儿童打交道，所以这可能并不那么重要。

让 droppables 只接受某些 draggables？

Making droppables only accept certain draggables?

javascript

jquery

jquery-ui

droppable

draggable