Question

我目前正在此页面上使用jQuery UI draggables，将单词拖到相关的框中。 http://marmiteontoast.co.uk/fyp/login-register/register-username-builder.php

JS Fiddle

它使用constrain让你进入页面的一般div，你不能拖到那个区域之外。

原样（希望）很明显，你打算将一个绿色字拖入绿色框，一个紫色拖入紫色等等。但是，我想做几件事。基本上使用constrain但反过来。我想不允许拖动某些颜色的盒子，例如：

来自（1）的单词只能被拖入框（1）。它只会碰到紫色盒子的边缘。其他颜色也一样。尝试将它们拖到错误的方框中，然后它们就会停在边缘。
if statement一旦项目被拖入框中，就不能再将任何内容拖入其中。除非您删除该单词，否则它将再次可用（限制每个单词一个单词）。

这是我到目前为止对draggables的基本代码：

// Draggies
$( ".draggable" ).draggable({ containment: "#dragArea", scroll: false });
$( ".slot.one" ).droppable({
  drop: function() {
    $(".tick.one").fadeIn("fast");
  }
});
$( ".slot.two" ).droppable({
  drop: function() {
    $(".tick.two").fadeIn("fast");
  }
});
$( ".slot.three" ).droppable({
  drop: function() {
    $(".tick.three").fadeIn("fast");
  }

}）;

每个图块和框使用.slot.one和.word.one将它们定义为不同，因此可以单独为每个图块（1,2或3）编写脚本。

jQuery UI Draggable - 通过NOT允许在区域内拖动来约束移动

0 个答案: