jQuery 可放置和可拖动计数（如果正确）

Question

我是 jQuery 的新手，目前被（我想）一个简单的问题所困扰。

我有两个列表：一个可放置列表和一个可拖动列表； 2个问题：

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

2）如何检查掉落的物品是否在正确的掉落区域？ 每个都有一个 ID，并且应该放置在正确的区域中（drag1 到 drop1）。

“实时”执行此操作很简单，只需使用 drop 函数检查 UI 的 ID 是否与 $(this) 的 ID 相同即可。

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

简而言之，如何迭代可放置的对象并检查放置在其上的可放置对象是否正确。

代码：http://jsfiddle.net/setki/BCnyU/

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

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

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

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

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

Answer 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/

玩得开心！