jQuery (드래그 가능/드롭 가능 동작 포함)

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")); 
      }, 
     }); 
    }); 
}); 

바이올린 : 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을 1000ms로 설정하고 트리거 할 때 클래스를 추가합니다.

마지막으로 아웃 콜백에서 시간 초과를 지우고 클래스를 제거하십시오.

두 단계와 세 단계를 모두 처리하지만 드롭 된 항목을 포수에 추가 할 수는 없습니다. 희망이 도움이됩니다!