如果正确，则 jQuery 可拖放和可拖动计数答案

【问题标题】：jQuery droppable and draggable count if correct如果正确，则 jQuery 可拖放和可拖动计数
【发布时间】：2012-01-25 13:35:30
【问题描述】：

我是 jQuery 新手，目前在（我想）一个简单的问题上被阻止。

我有两个列表：一个 droppable 和一个 draggable； 2个问题：

1) 如何知道掉落的物品？因此，请列出“已丢弃”区域中的所有项目。

2) 如何检查被丢弃的物品是否在正确的放置区？每个都有一个 ID，应该放在正确的区域（drag1 到 drop1）。

做这个“活”很简单，只需检查 UI 的 ID 是否与使用 drop-function 的 $(this) 的 ID 相同。

但我想始终允许丢弃，并在每次正确丢弃多少时重新计算。您可以使用计数器，但删除选项（请参见示例）会使操作变得过于复杂。

简而言之，如何迭代droppables并检查droppables是否正确。

【问题讨论】：

【解决方案1】：

为您的可拖动对象添加一个启动函数，例如：

$('#yourelement').draggable({ revert: true, start: function() { $(this).addClass('active'); }

现在，您当前拖动的元素将获得“活动”类。现在在你的 droppable 的 drop 函数中，你可以像这样检查这个元素的 id：

var dragID = $('.active').attr('id');

要将其与 dropzone 的 id 进行比较，您还需要将 drop id 放入 var 中。

var dropID = $(this).attr('id');

从这里您需要拆分字符串，因为它只是您要比较的数字。不知道拆分函数是如何工作的，只是谷歌“javascript .split”，你应该得到一个数组，如果你为每个符号“drop1”拆分例如将成为一个包含5个符号的数组，其中最后一个[4]将是号码。从这里您可以将这两个拆分的变量相互比较。即;

 if(splitted_dragID[4] == splitted_dropID[4]) {
       counter++;
       $('#counter').text('Correct: '+counter);
 }

这假设你有一个名为 counter 的变量，每次函数正确时都会给自己加一。

希望这会为您指明正确的方向！ :)

【讨论】：

请注意，使用此解决方案，您将希望在删除项目后删除“.active”类。 $('.active').removeClass('active')。除了答案+1
我添加了上面的代码。我可以迭代 droppable 的 ID，但如何获取变量 "dragID" ？ jsfiddle.net/setki/BCnyU
以上代码不正确。使用该代码时，第一次“删除”时出错，因为找不到该类。甚至更多...不需要添加类，因为您可以像这样直接获取 ID：ui.draggable.attr('id')
我的代码不是为他正在做的事情而手工制作的，所以问题中的类不在代码中。是的，你说得对，ui.draggable.attr('id') 可能是一个更好的解决方案，我对 jqueryui api 并不是很熟悉。

【解决方案2】：

好的，我找到了解决方案，虽然我对它不太满意，因为它看起来很“奇怪”。

我所做的是向 Droppable 添加一个额外的类：“OK”。这是一个没有样式的类（但可以根据需要用于样式）。

if (dragID == dropID) {
  $(this).addClass('OK');
} else {
  $(this).addClass('NOK');
}

那我只计算所有有这种风格的人

var numItems = $('.OK').length;
$('.counter').html('Correct: '+numItems +'/5');

别忘了，如果从 droppable 中删除了 draggable，也要删除该类

$(this).removeClass('OK NOK');

嗯，任何人都可以使用这个简单的解决方案，但我很想知道 jQuery 中是否真的没有其他解决方案。

可以在以下位置找到工作示例：http://jsfiddle.net/setki/BCnyU/

玩得开心！

【讨论】：