jquery droppable loses its original class

Question

I need to get elements id and class when something is dropped on it. Id works fine, but class is not passed...

HTML

<div id="drag" class="two">drag</div>
<div id="drop" class="one">drop</div>

JS

$(document).ready(function(){
    $("#drag").draggable();
    $("#drop").droppable({
        drop: function(){
            alert(this.class+" "+this.id)
        }
    });

jsfiddle

Answer 1

http://jsfiddle.net/FLLaj/

As mentioned. when Draggable is dropped, it retrieved the class. but there's 2 classes. A much proper way of doing is to use data-* attribute introduced in HTML5

 $(document).ready(function(){
        $("#drag").draggable({revert: true})
        $("#drop").droppable({
            drop: function(){
                alert($(this).attr('class')+" "+$(this).attr('id'))
            }})
       })

Answer 2

There's no class property - use className to retrieve the class. But as has been noted in the comments, jQuery UI adds its own classes as well.

Answer 3

Instead of class you can use any rel attributes.Because class names are not unique.For Example

<div id="drag" class="two" rel="u1">drag</div>
<div id="drop" class="one"rel="u2">drop</div>

JS COde:
$(document).ready(function(){
 $("#drag").draggable({revert: true})
 $("#drop").droppable({
    drop: function(){
        alert($(this).attr('rel'));
    }})
})

Link Here

Answer 4

$(document).ready(function(){
   $("#drag").draggable({revert: true})
   $("#drop").droppable({
       drop: function(event,ui){
           console.log(ui.draggable.attr('class'));
           console.log($(this).attr('class'));
       }
   });
});

modified your code.check if it works