jQuery с функцией Draggable/Droppable для Over и Out

Question

Мне очень нужна ваша помощь. Я так старался, чтобы получить это право, но я просто не могу это сделать ..

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

JS-код:

$(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' to the row under after 1 second 
      }, 
      out: function() { 

      }, 
      drop: function (e, ui) { 

       var droppedEl = ui.draggable; 
       // Adds the task as the first child to dropped row 
       $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId")); 
      }, 
     }); 
    }); 
}); 

---

Что я м пытается достичь это:

1. перетащить ряд на другую строку
(Готово!)
2. при наведении более чем на 1 секунду он должен добавить класс к строке под
3. Когда еще зависания и перейти к другим строкам он должен удалить добавленный класс в предыдущем шаге

Я appriciate времени и Помогите.

Answer 1

Мне удалось это решить наконец! Вот решение:

$(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 
    var hoverTimeout; 
    $("table tbody tr").each(function() { 
     var that=this; 
     $(this).droppable({ 
      accept: ".draggable", 
      hoverClass: "append-to-task", 
      over: function (e, ui) { 
       clearTimeout(hoverTimeout); 
       $('.accept-incoming-task').removeClass('accept-incoming-task'); 
       // add class 'accept-incoming-task' to the row under after 1 second 
       hoverTimeout = setTimeout(function(){ 
        $(that).addClass("accept-incoming-task"); 
       }, 1000); 
      }, 
      out: function() { 

      }, 
      drop: function (e, ui) { 
       $('.accept-incoming-task').removeClass('accept-incoming-task'); 
       var droppedEl = ui.draggable; 
       // Adds the task as the first child to dropped row 
       $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId")); 
      }, 
     }); 
    }); 
}); 

Fiddle: http://jsfiddle.net/7yEaU/2/

Answer 2

Посмотрите на 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' to the 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 the task as the first child to dropped row 
      $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId")); 
     }, 
    }); 
}); 

У меня есть свой шаг два рабочих. Первое, что вам нужно сделать, это удалить hoverClass из вашего зависания, вы потянете его вручную после задержки таймаута.

Во-вторых, создайте переменную hoverTimeout вне этого (чтобы вы могли получить к ней доступ как от наведения, так и от обратных вызовов).

В-третьих, в режиме over: callback установите значение hoverTimeout в 1000 мс и добавьте класс при его запуске.

Наконец, в обратном вызове выведите тайм-аут и удалите класс.

Это обрабатывает как шаг два, так и три - но это не позволяет вам сбросить и добавить выпавший элемент в ловушку. Надеюсь, поможет!