Droppable / draggable in a table with divs.

Droppable / draggable in a table with divs.

Hi everyone
I'm having a problem with draggable and droppable in jquery UI. I have a sort of horizontal calendar I'm developing for a specific bunch of clients. Here's how it works :

Basically I have a table (I know, not my original idea, can't really change it now).
Each row has 5 tds representing a week. Each Td has 7 divs aligned horizontally representing a day. Each day div can contain one div called a "reservation" or none at all. A reservation is a box that starts in a specific day and has a length of 1 or more days. So it's representation will overlap on several divs. Each row can have several reservations.

Now I want to make each reservation draggable and be able to drop them on an other day div but only in the row that they belong to.

I've made the reservation draggable and that works fine, however when I make the day div droppable, the divs that will "catch" the draggable will belong to the wrong row (in my case the one above the reservation's row).


here's my js code :

            for (var i = 0; i < data.ordered_ids.length; i++){
                var row = null;
                row = insertGeneratedRow(data.ordered_ids[i], bookerArray[data.ordered_ids[i]]);
//                row = $("#tr41");
                row.find('.duree_reser').draggable({axis:'x', scope: row.attr('id'), snap: '.td_content', snapMode:'inner', containment:row, cursor:'crosshair',
                    cursorAt: {left: 5},
                    start: function(event, ui){
                        ui.helper.data('color', ui.helper.css('background-color'))
                        ui.helper.css('background-color', 'transparent');
                        console.log(ui);
                        //console.log($(this).parents('tr').find('.td_content').droppable('option', 'accept'));
                    },
                    stop : function(event, ui){
                        ui.helper.css('background-color', ui.helper.data('color'));
                    }
                });//, revert: 'invalid'});
//                row.find('.duree_reser').disableSelection();
//
                row.find('.td_content').droppable({activeClass:'copie_trans', //accept: accept_draggable,
                                                    hoverClass:'color_dr_rouge',scope: row.attr('id'), //tolerance: 'cursor',
                                                   // greedy: true,
                    drop: function(event, ui){
                        console.log("hu hu");
                        console.log($(this).parent());
                    }
                });


                row = null;
            }