Jquery拖放验证

Question

我拥有用于​​ jQuery 拖放测验的大部分功能。

您可以在这里查看：http://www.chaosdesign.com/production/ernst-young/2014/landingpage/

用户从右侧拖动一个单词并将其放在左侧的空白处。

我的问题是我需要对正确的单词放在正确的区域进行某种验证。

我为每个拖动元素 (.wordX) 和每个放置元素 (.snapX) 添加了一个唯一的类

我想我可以使用 jquery .offset 方法找到“.snap1”元素的坐标。然后有某种 if 语句说只允许 drop 如果 '.word1' .coordinates 匹配。否则返回起始位置。

但我不知道如何解决这个问题。

任何帮助将不胜感激！

当前的 JS

$(function() {
$( ".draggable" ).draggable({ snap: ".snapTarget", snapMode: "inner", snapTolerance:
20, revert: "invalid" });
$( ".wordBg" ).droppable({
hoverClass: "boxHover",
});
});

当前的 HTML 结构

可拖动项目：

<div class="draggable word1">objectivity</div>
<div class="draggable word2">consult</div>

捕捉目标：

<span class="wordBg word6 snapTarget snap1"></span>
<span class="wordBg word6 snapTarget snap2"></span>

Answer 1

这当然可以改进，但它通过使用可放置元素http://jsfiddle.net/pf34F/ 中的接受选项来显示第一句的工作原理@

$(".word6").droppable({
   accept: ".word6"
});

（此处描述：http://api.jqueryui.com/droppable/#option-accept）