有没有办法匹配可拖动和可放置的 id？

Posted 2023-05-08

【中文标题】有没有办法匹配可拖动和可放置的 id？

【英文标题】：Is there a way to match draggable and droppable id's?

【发布时间】：2019-09-09 01:38:10

【问题描述】：

我正在建设拖放益智游戏。我在左侧有可拖动（图像），在右侧有可放置（div）。如您所见，它们都有唯一的ID，例如 "img_1" 和 "drop_1" ，所以基本上我想通过他们的 id 号码来匹配它们，在这种情况下是 "_number"。如果我成功了，我想我可以开发一些我需要的逻辑。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div id="tasks">
      <img class="task" id="img_1" src="img/puzz1.jpg" >
      <img class="task" id="img_2" src="img/puzz2.jpg" >
      <img class="task" id="img_3" src="img/puzz3.jpg" >
      <img class="task" id="img_4" src="img/puzz4.jpg" >
      <img class="task" id="img_5" src="img/puzz5.jpg" >
      <img class="task" id="img_6" src="img/puzz6.jpg" >
      <img class="task" id="img_7" src="img/puzz7.jpg" >
      <img class="task" id="img_8" src="img/puzz8.jpg" >
      <img class="task" id="img_9" src="img/puzz9.jpg" >



     

    </div>

    <div id="drops">
      <div id="drop_1" class="box2"></div>
      <div id="drop_2" class="box2"></div>
      <div id="drop_3" class="box2"></div>
      <div id="drop_4" class="box2"></div>
      <div id="drop_5" class="box2"></div>
      <div id="drop_6" class="box2"></div>
      <div id="drop_7" class="box2"></div>
      <div id="drop_8" class="box2"></div>
      <div id="drop_9" class="box2"></div>



    </div>

逻辑应该是这样的：

if(draggable id "_number" != dropabble id"_number")return to original position

elsestay in that droppable

【参考方案1】：

我找到了答案。 Simple 只是在可拖动元素上添加了“data-id='a'”，并且还在可放置元素上添加了“data-id='a'（必须是相同的数据 id）”。

接下来要做的就是在 jQuery 中将它们与 attr 匹配就可以了。

$(function () 
  $(".task").draggable( revert: 'invalid' );
  $(".box2").droppable( 
      accept: function(drag) 
          var dropId = $(this).attr('data-id');
          var dragId = $(drag).attr('data-id');
          return dropId === dragId;
      
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div id="tasks">
      <img class="task" data-id='a' id="img_1" src="img/puzz1.jpg" >
      <img class="task" id="img_2" src="img/puzz2.jpg" >
      <img class="task" id="img_3" src="img/puzz3.jpg" >
      <img class="task" id="img_4" src="img/puzz4.jpg" >
      <img class="task" id="img_5" src="img/puzz5.jpg" >
      <img class="task" id="img_6" src="img/puzz6.jpg" >
      <img class="task" id="img_7" src="img/puzz7.jpg" >
      <img class="task" id="img_8" src="img/puzz8.jpg" >
      <img class="task" id="img_9" src="img/puzz9.jpg" >



     

    </div>

    <div id="drops">
      <div id="drop_1" data-id='a' class="box2"></div>
      <div id="drop_2" class="box2"></div>
      <div id="drop_3" class="box2"></div>
      <div id="drop_4" class="box2"></div>
      <div id="drop_5" class="box2"></div>
      <div id="drop_6" class="box2"></div>
      <div id="drop_7" class="box2"></div>
      <div id="drop_8" class="box2"></div>
      <div id="drop_9" class="box2"></div>



    </div>
  </div>

我也没有为我的所有元素都这样做，但我会这样做。我只是想发布答案。