Question

I have jquery drag and drop working so I can move one row in a table to another.

the demo is here:
http://www.aussiehaulage.com.au/Default.aspx

I use jquery-ui-1.8.22 to make my table draggable/droppable.

My javascript is :

 $(document).ready(function () {

        $(".draggable").draggable({
            helper: function () { return "<div class='ghost'></div>"; },
            start: resizeGhost,
            revert: 'invalid'
        });

        $(".droppable").droppable({
            hoverClass: 'active',

            drop: function (event, ui) {
                var target = $(event.target);
                var draggable = ui.draggable;

                draggable.insertBefore(target);
            },
            tolerance: 'touch'


        });



    });

However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..

is this possible?

Answer 1

Add a new option in your droppable element, using either tolerance fit or intersect

   $(".droppable").droppable({
        hoverClass: 'active',
        tolerence: 'intersect',
        drop: function (event, ui) {
            var target = $(event.target);
            var draggable = ui.draggable;

            draggable.insertBefore(target);
        },
        tolerance: 'touch'

    });

And for your reference: jquery-ui