Question

我正在建立拖放益智游戏。我在左侧有draggables（图片），在右侧有droppable（divs）。如您所见，它们都有唯一的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}

else{stay in that droppable}

Answer 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>

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

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

1 个答案: