Question

I have a single column table, where every cell is a droppable that accepts draggables of a certain class. The borders of this table are visible, but I do not want fixed size cells coloured and visible, which looks ugly to me. When I drag a draggable to intersection with a cell, the cell would highlight, which is not difficult to do, but I also want this highlight to take the size of the draggable. All draggables are fixed width, but some have more height than others, so adapting the height would be sufficient, but I have no idea where to begin. Here is an example of the kind of adaptation I am looking for.

Answer 1

For your requirement, I recommend that you use jQueryUI “Sortable” instead of Draggable/Droppable.
See the portlets demo on the jQueryUI site , it should be the functionality you’re looking for.

Edit: @Subhamoy, I see now what you mean.
Here is a solution that uses Sortable and relies on CSS to build the table:
Link to jsfiddle

The key part is the ‘over’ handler that takes care of resizing the placeholder:

$( ".target .tbody" ).sortable({
    forcePlaceholderSize: true,
    placeHolder: "ui-sortable-placeholder",
    connectWith: ".source .tbody",
    items: "> .tr",
    over: function(event, ui) {
        var $context = $(this)
            ,$h = ui.helper
            ,$p = $('.ui-sortable-placeholder', $context)
            ,hheight = $h.height()
        ;
        $p.removeAttr("style");
        $p.css("height", hheight + "px");
    }
});