새로운 요소에 드래그 앤 드롭을 사용하여 jquery 성능 문제가 발생했습니다.

Question

일부 드래그/드롭 기능과 함께 작동하는 작은 웹 응용 프로그램이 있습니다. 주문 1 (draggable)이 직원 2 (droppable)에 의해 수행된다고 말할 수있는 작은 주문 시스템을 상상해보십시오. 그건 잘 작동합니다. 하지만 :

매 20 초. AJAX를 통해 데이터베이스에 새로운 주문을 요청합니다. 이 새로운 명령도 드래그 할 수 있습니다. 다른 대학이 종업원에게 명령을 내린 경우, 모든 종업원을위한 명령 목록도 적재되지 않습니다. 드래그를 사용하려면/I를 실행했다 아약스 요청 후 드롭 :

$('.order').draggable({ 
.. 
}); 

및

$('.employee').dropable({ 
.. 
}); 

그래서 JQuery와 기능은 구멍 DOM을 통해 매 20 secunds을 안내합니다. 10-15 분의 minitues 후 응용 프로그램이 매우 느리게됩니다. 이 프로세스를 어떻게 개선 할 생각이 있습니까? 첫 번째 등록 후에이 요소가 만들어 지더라도 모든 .order 클래스를 드래그 할 수 있다는 절대적인 진술을 제공 할 수 있습니까?

Answer 1

감사합니다!

당신이 좋은 생각이 될 수

$('.order').each(function() { 
    var element = $(this); 
    if (!element.hasClass('ui-droppable')) { 

    element.droppable({ 
    ... 
} 
}); 

Answer 2

제가 생각하기에 문제는 이미 페이지에있는 요소들이 반복해서 드래그 할 수 있다는 것입니다. 나는 해결책이 이미 그것을 가지고 그들에 클래스를 할당하는 것입니다 생각 : 당신의 좋은 생각 해냈어 조나스 @

$('.order').each(function() { 
    var element = $(this); 
    if (!element.hasClass('event-already-attached')) { 
     element.addClass('event-already-attached').draggable({ 

     }) 
    } 
});