폐쇄 루핑 : 작동하지 않습니까? (jqueryui 사용)

Question

나는 내 코드에서 클로저 클로저 문제를 생각해 냈다. 나는 this article 을 읽었으며 큰 도움이되었습니다. 최근에 기사에서 언급 한 "Closure With Looping"절과 비슷한 문제가 생겼습니다. 나는 그들의 해결책을 시도했지만 여전히 내 문제를 해결하지 못했습니다. 나는 해결책을 찾기 위해 어디에서나 찾고 있었지만 나는 항상 기사에서 하나를 찾는다.

일부리스를 드래그 할 수 있도록 jqueryui를 사용하고 있습니다. 컨테이너에 놓을 때 해당 리의 변수 (노드)를 사용해야합니다. 문제는 노드 (및 인덱스)가 항상 마지막 것입니다 (따라서 클로저 문제). 여기

내 코드입니다 (나는 그것을 조금 단순화했습니다 문제 식별 간단 있도록) :

function makeDraggable(node, i) { 
     $("#rightTab li#" + node.id).draggable({ 
      containment: 'div#container', 
      stack: 'div#container', 
      scroll: false, 
      revert: 'invalid', 
      helper: function() { 
       return $(this).children().clone(); 
      }, 
      start: function(event, ui) { 
       $(this).children().css('opacity', 0); 
      }, 
      stop: function(event, ui) { 
       $(this).children().css('opacity', 1); 
      } 
     }); 

     $("#vis").droppable({ 
      drop: test(node, i) 
     }); 
    } 

    function test(noder, index) { 
     return function(event, ui) { 
      alert(index); 
      //stuff with node. 
     } 
    } 

    function appendInfo(nodes) { 
     for(var i = 0; i < nodes.length; i++) { 
      $("#rightTab #content ul").append("<li id=" + nodes[i].id + "><div></div></li>"); 

      if(visualization.hasImageLabel) { 
       interfaceHandler.handleImageLabel(nodes[i]); 
      } 
      if(visualization.hasTextLabel) { 
       interfaceHandler.handleTextLabel(nodes[i]); 
      } 

      makeDraggable(nodes[i], i); 
     } 
    } 

내가 (기능 시험) 인덱스를 경고 항상 9 인쇄를 (최대 배열 길이), 노드도 항상 마지막 것입니다. 당신이 전화하는거야

function makeDraggable(node, i) { 
    var innerIndex = i; 
    $("#rightTab li#" + node.id).draggable({ 
     containment: 'div#container', 
     stack: 'div#container', 
     scroll: false, 
     revert: 'invalid', 
     helper: function() { 
      return $(this).children().clone(); 
     }, 
     start: function(event, ui) { 
      $(this).children().css('opacity', 0); 
     }, 
     stop: function(event, ui) { 
      $(this).children().css('opacity', 1); 
     } 
    }); 

    $("#vis").droppable({ 
     drop: test(node, innerIndex) 
    }); 
} 

Answer 1

을 : 루프 것이 선언 때까지 내가 변수를 조회 유지할으로

Answer 2

가하는 내부 변수를 추가, 이것을 시도

(나쁜 영어 죄송합니다) 루프를 통한 모든 반복마다 $("#vis").droppable({...}). 이렇게하면 1drop 이벤트 핸들러가 설정됩니다. 마지막 매개 변수 만 해고되었습니다 (node_nine, 9)가 매개 변수로 전달되었습니다.

콜백 내의 ui.draggable 값을 확인하십시오. 드롭 된 요소가 무엇인지 알려줍니다.

Answer 3

$("#vis").droppable(...)은 이전에 정의 된 모든 삭제 가능 기능을 대체하므로 클로저에 용해되지 않습니다. 이 인덱스를 아는 것이 중요합니다 경우

후 .data(...)와 함께 자신의 인덱스를 알고 각 드래그 노드를 만드는 시도, 그리고 makeDraggable()에, appendInfo()에 한 번만 $("#vis").droppable(...)를 호출합니다. 이 인덱스를 알 필요는 없습니다 경우

function appendInfo(nodes) { 
    for(var i = 0; i < nodes.length; i++) { 
     $("#rightTab #content ul").append("<li id=" + nodes[i].id + "><div></div></li>"); 
     if(visualization.hasImageLabel) { 
      interfaceHandler.handleImageLabel(nodes[i]); 
     } 
     if(visualization.hasTextLabel) { 
      interfaceHandler.handleTextLabel(nodes[i]); 
     } 
     makeDraggable(nodes[i], i); 
     $(node).data('index', i); //<<< node is now aware of its own index 
    } 
    $("#vis").droppable({ 
     drop: function(event, ui) { 
      alert(ui.draggable.data('index'));//I think??? 
      //stuff with node. 
     } 
    }); 
} 

는, 당신은 단지 설정하거나 .data()을받지 않고, ui.draggable로 드래그 액세스 할 수 있습니다.