Jquery拖放验证

Posted 2023-05-08

【中文标题】Jquery拖放验证

【英文标题】：Jquery Drag and Drop validation

【发布时间】：2014-02-11 00:10:03

【问题描述】：

我拥有用于​​ 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>

【问题讨论】：

试试api.jqueryui.com/droppable/#option-accept，给每个droppable一个属性，比如data-accepts="wordX"，并在调用droppable时使用它。

感谢您为我指明正确的方向

【参考方案1】：

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

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

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

【讨论】：

非常感谢，实际上我昨天晚些时候得到了同样的答案！感谢您的帮助:-)

不客气。这是我自己的项目需要的一段很好的代码:-)

很高兴我能帮到你，过几天再回来看看链接会有更多的功能:-)