jQuery检查是否正确的元素已被“删除” [英] jQuery checking if the correct an element has been "dropped"

问题描述

所以我得到了10个不同的可拖动盒子和2个可丢弃区域，5个盒子将进入droppable 1，然后其他5个将进入droppable 2。

如果方框1试图进入droppable 2，它不应该工作。

这几乎就像一个测验，需要匹配正确的盒子（可拖动）与正确的答案（droppable）。

我正在努力找到一种方法来做到这一点，我可以得到可拖动的元素，并能够将它们拖动到任何框但我如何验证它是否是正确的？我可以在元素上设置某种价值吗？

下面是我到目前为止的一个例子....
曼宁网站全是在PHP中完成，所以我将使用PHP来生成盒子文本。

jQuery

  $（function（）{
 $（＃draggable，＃draggable2）。draggable（）; 
 $（＃droppable ）.droppable（{
 drop：function（event，ui）{
 $（this）
 .find（p），
 alert（）; 
 } 
}）; 
}）; 
  

HTML

 < div id =draggableclass =ui-widget-content> 
< p>将我拖到我的目标< / p> 
< / div> 
< div id =draggable2class =ui-widget-content> 
< p> 2< / p> 
< / div> 
 
< div id =droppableclass =ui-widget-header> 
< p>在此处放置< / p> 
< / div> 
< div id =droppableclass =ui-widget-header> 
< p>在此处放置< / p> 
< / div> 
  

解决方案

您可以将一些自定义属性添加到draggabl并放置html元素，当你删除元素时，你检查可拖动和droppable上的值是否相同

 << ; div id =draggableclass =ui-widget-contentmyValue =question1> 
< p>将我拖到我的目标< / p> 
< / div> 
 
< div id =droppableclass =ui-widget-headermyValue =question1> 
< p>在此处放置< / p> 
< / div> 
  

编辑：添加js（未测试）

< pre $ $（function（）{
$（＃draggable，＃draggable2）。draggable（）;
$（＃droppable）。droppable {
drop：function（event，ui）
{
if（$（this）.attr（myValue）== ui.attr（myValue））
{
alert（OK）;
}
}
}）;
}）;


So I have got for example 10 different "draggable" boxes and 2 "droppable" areas, 5 boxes will go into droppable 1 and then the other 5 will go into droppable 2.

If box 1 tries to go into droppable 2 it shouldn't work.

It's almost like a quiz, need to match up the correct boxes(draggable) with the correct answers(droppable).

I am struggling to find a way to do it, I can get the elements draggable and be able to drag them to any box but how can I validate if it's the correct one? Could I put some sort of value on the element?

Here's a example of how far I have got so far.... The manin website is all done in PHP so i'll be using PHP to generate the "boxes" text.

jQuery

      $(function () {
      $("#draggable,#draggable2").draggable();
      $("#droppable").droppable({
          drop: function (event, ui) {
              $(this)
                .find("p"),
                alert();
          }
      });
  });

HTML

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>2</p>
</div>

<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

解决方案

You could add some custom attributes to the draggabl and droppable html elements, and when you drop the element, you check that the value on the draggable and on the droppable is the same

<div id="draggable" class="ui-widget-content" myValue="question1">
<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header" myValue="question1">
<p>Drop here</p>
</div>

Edit: added js (not tested)

$(function () {
  $("#draggable,#draggable2").draggable();
  $("#droppable").droppable({
      drop: function (event, ui) 
     {
             if($(this).attr("myValue") == ui.attr("myValue"))
             {
                  alert("OK");
             }
     }
  });
  });

这篇关于jQuery检查是否正确的元素已被“删除”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！