Is there a way to match draggable and droppable id's?

Question

I am buldiing drag and drop puzzle game. I have draggables(images) on the left and droppable(divs) on the right. As you can see they all have unique id like "img_1" and "drop_1" , so basically i want to match them by their id's number in this case that is "_number". If i succeed this ,i think i can develop some logic i need.

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

Logic should be looking like this:

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

else{stay in that droppable}

Answer 1

I found the answer. Simple just added "data-id='a' on draggable elements" , and also added "data-id='a' on droppable elements as well(must be the same data id)".

Next thing to do is just to match them in jQuery with attr and that would be it.

 $(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> 

I also didn't do for all my elements, but i will do that. I just wanted to post the answer.