table - jQuery with Draggable/Droppable behavior on Over and Out -

i need one. i've been trying hard right can't it..

jsfiddle: http://jsfiddle.net/5vyq8/13/

js-code:

$(document).ready(function () {      // treetable     $("table").treetable({         expandable: true,         initialstate: "expanded",         expandertemplate: "<a href='#'>&nbsp;&nbsp;&nbsp;&nbsp;</a>",         indent: 24,         column: 0     });      // draggable     $("table .draggable").draggable({         opacity: .75,         refreshpositions: true,         revert: "invalid",         revertduration: 300,         scroll: true,         delay: 100,         cursor: 'move'     });      //droppable     $("table tbody tr").each(function () {         $(this).droppable({             accept: ".draggable",             hoverclass: "append-to-task",             over: function (e, ui) {                           // add class 'accept-incoming-task' row under after 1 second             },             out: function () {              },             drop: function (e, ui) {                  var droppedel = ui.draggable;                 // adds task first child dropped row                 $("table").treetable("move", droppedel.data("ttid"), $(this).data("ttid"));             },         });     }); }); 

---

what i'm trying achieve this:

1. drag row other row (done!)
2. while hovering more 1 second should add class row under
3. when still hovering , moving on other rows should remove added class in previous step

i appriciate time , help.

take @ http://jsfiddle.net/snowmonkey/7yeau/

$("table tbody tr").each(function () {     var that=this;     $(this).droppable({         accept: ".draggable",         over: function (e, ui) {              // add class 'accept-incoming-task' row under after 1 second             hovertimeout = settimeout(function(){                 $(that).addclass("append-to-task");             }, 1000);         },         out: function () {            cleartimeout(hovertimeout);             $(that).removeclass("append-to-task");         },         drop: function (e, ui) {              var droppedel = ui.draggable;             // adds task first child dropped row             $("table").treetable("move", droppedel.data("ttid"), $(this).data("ttid"));         },     }); }); 

i have step 2 working. first thing need remove hoverclass hover, you'll pull manually after timeout delay.

second, create hovertimeout var outside of (so can access both hover , out callbacks).

third, in over: callback, set hovertimeout 1000ms , add class when triggers.

finally, in out callback, clear timeout , remove class.

this handles both step 2 , 3 -- doesn't let drop , append dropped item catcher. hope helps!