Get Drop Component Target

Question

Hi, I want to get the Drop target className / ID after the Drop event. Does anyone tell me how to get there?

<div class="drop_1" id="drop1"></div> <div class="drop_2" id="drop2"></div> <div class="drop_3" id="drop3"></div> 

all DIV components must be dragged and dropped onto each other

Answer 1

Example

 $(function() { ***/* Make draggable */*** $(".drop_1, .drop_2, .drop_3").draggable(); var dropOpts = { accept:".drop_1, .drop_2, .drop_3", drop:dropCallback, greedy:true }; /* Droppable */ $(".drop_1, .drop_2, .drop_3").droppable(dropOpts); /*get your Drop target*/ function dropCallback(e) { alert("The firing droppable was " + e.target.className); } }); 

Answer 2

use this.id inside the drop handler

jsFiddle demo

 $( ".selector" ).droppable({ drop: function(event, ui) { console.log(this.id); } });