Question

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

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

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

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

执行此“实时”操作非常简单，只需检查UI的ID是否与使用drop-function的$（this）的ID相同。

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

简而言之，如何迭代droppable并检查丢弃的droppable是否正确。

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

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

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

这假设您有一个名为counter的变量，每次函数正确时都会为其自身添加一个。

希望这能指引你朝着正确的方向前进！：）

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中是否真的没有其他解决方案。

找到工作示例

玩得开心！