draggable jquery get start parent() element

Question

I want to drag and drop Items with juery.

Right now I do have a "storage" with multiple items.

On the other site I have x boxes. each box can contain only 1 item.

Right now, I use the droppable function to set another class on the box, that only 1 box can be added which is work in:

 $( ".droppable" ).droppable({
     accept: ".draggable",
     activeClass: "draghover",
     drop: function( event, ui ) {
         if($( this ).hasClass("droppable")) {
             $( this ).removeClass("droppable").addClass( "droppable-");
         }
     } });

Now, I need to revert the Class, when I move back the item to the storage or to another box. I tried this with the draggable.start function, but I cannot get the correct parent()

$( ".draggable" ).draggable({
        revert: "invalid",
        snap: ".droppable",
        snapMode: "inner",
        start: function( event, ui ) {
            alert($( this ).parent().attr("Class"));

        }
    });

this will all the time return the start position before the first dragging. Not the latest position.

Storage is look like:

<td valign="top" class="warenlager" bgcolor="grey" width="200">
    <div class="draggable" class="bild ui-widget-content" id="s73-1">S</div>
    <div class="draggable" class="bild ui-widget-content" id="s74-1">S</div>
</td>

Box are look like:

<td><div class="droppable" id="element 2"></div></td>

Regards

Answer 1

If you want to revert the class of the box after the the draggable element is removed from the droppable (which is what I think you asking) then use the out event handler, so now the code would look something like:

 $( ".droppable" ).droppable({
 accept: ".draggable",
 activeClass: "draghover",
 drop: function( event, ui ) {
     if($( this ).hasClass("droppable")) {
         $( this ).removeClass("droppable").addClass( "droppable-");
     }
 },
 out: function()
 {
     $(this).addClass("droppable").removeClass( "droppable-");
 }
 });

Hope this helps :)