Question

我有大部分功能都在jQuery拖放测验。

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

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

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

我为每个拖动元素（.wordX）和每个drop元素（.snapX）添加了一个唯一的类

我想我可以使用jquery .offset方法找到'.snap1'元素的坐标。然后有一些if语句说只有当'.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>

Snap Targets：

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

Answer 1

这当然可以改进，但它通过使用droppable元素http://jsfiddle.net/pf34F/

中的accept选项显示它对第一句的工作原理

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

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

Jquery拖放验证

1 个答案: