Question

I’m trying to optimize response time on a page with a “large” table that is a jquery droppable that accepts ~6 draggables. Like others I’ve seen poor response time when making each of the droppables. I’ve read both this post and this post, but I can’t seem to get my code to work.

My basic problem is I don’t know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.

Here’s how I’ve defined my jquery code:

$( "#grid table" ).droppable({
                    //disabled: 'true',
                    //activate: function (event, ui) {
                    //          console.log("Activated table")
                    //},
                    //over: function (event, ui) {
                      //      console.log("Dragged over")
                    //},
                    //activeClass: "ui-state-default",
                    //hoverClass: "ui-state-hover",
                    accept: ":not(.ui-sortable-helper)",
                    tolerance: 'pointer',
                    drop: function( event, ui ) {
                            console.log("draggable DROPPED!!!");
                            //$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
                            var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());

                            console.log('Dropped cell is'+cell);
                            console.log(ui.position)
                            console.log(ui.offset)
                            console.log(document.elementFromPoint(ui.position.left, ui.position.top))
                            $(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);

                            console.log('Setting background to:'+ui.draggable.attr("colorValue"));  
                    }

Any help you can provide is much appreciated.

Answer 1

$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped