Draggable is not fit into droppable when dragged back

Question

I am new to the Draggable and Droppable plugin. Here the codepen lin of my app http://codepen.io/anon/pen/qEMVwE

This is how it works, 1. We can drag the div element (Blue color) with in the <td> tag. 2. We can place two div in the same row by drag and drop and the second div will be colored to red.

Here my problem, when I drag back the div (red color) to any empty column its left attribute is not changing. It is not fit into the row it goes outside of the row.

the drop and drag classes must be in position relative and absolute respectively please don't change that.

Please help me, it will be very helpful for me. Thanks in advance.

Answer 1

Here is a working example

In your code, change your handleCardDrop() function like this:

function handleCardDrop( event, ui ) {   
    if( $(this).children('.drag').length <2){
            $(ui.draggable).css({"top": "1px" ,"left":  0 }).appendTo(this);
            var apptValue = dataAppt.attr("data-appt");
            apptValue -= 1;
            dataAppt.attr("data-appt", apptValue);
            if( ($(this).attr("data-appt")) == 1){
                 $(this).attr("data-appt","2");
            }
            else{
                $(this).attr("data-appt","1");
            }
            ui.draggable.draggable( 'option', 'revert', false ); // move this outside the if/else so it gets applied in all cases
            resetAppointment();
            }
    else{
        alert('Only Two allowed!!!');   
    }

 }

Also, change your resetAppointment() function like this:

function resetAppointment(){
    $('td[data-appt="2"] .drag').css("width", "45%"); // 45% not 50% since your full witdh elements are only 90% not 100%
    var width = $('td[data-appt="2"] .drag').first().width();
    $('td[data-appt="2"] .drag').last().css({"left": width}); // wrap your selector string with single quotes and use double quotes inside where needed so you dont have to escape the quotes
    $('td[data-appt="1"] div.drag').css({"width": "90%", "left" : "0px"}); // i use px explicitly here because if I dont, I'll always forget to add it later when I change this to 10 or something
}