Есть ли способ сопоставления перетаскиваемых и сбрасываемых идентификаторов?

Question

Я играю в перетаскивание. У меня есть draggables (изображения) слева и droppable (divs) справа. Как вы можете видеть, все они имеют уникальный идентификатор, как «img_1» и «drop_1», поэтому в основном я хочу сопоставить их по номеру их идентификатора, в данном случае это «_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

Я нашел ответ.Просто добавили «data-id = 'a' для перетаскиваемых элементов», а также добавили «data-id = 'a' для сбрасываемых элементов (должен быть тот же идентификатор данных)".

Следующее, что нужно сделать, это сопоставить их в 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>

Я тоже не сделал для всех своих элементов, но я сделаю это.Я просто хотел опубликовать ответ.