IE의 테이블에서 jQuery UI 성능 문제가 발생했습니다.

Question

IE에서 성능이 좋은 UI 코드를 얻는 데 문제가 있습니다.

나는 값의 매트릭스 인 테이블을 가지고 있습니다. 각 셀은 비어 있거나 항목 목록을 보유 할 수 있습니다.

사용자가 셀간에 항목을 드래그 할 수있게하려고합니다.

그래서 내 HTML과 같은 : 절단 및 미완성

$j('.draggable-item').each(function() 
{ 
    $j(this).draggable({ 
     addClasses: false, 
     revert: true, 
     zIndex: 2000, 
     cursor: 'move' 
    }); 
}); 

$j('.droppable-cell').each(function() 
{ 
    $j(this).droppable({ 
     addClasses: false, 
     activeClass: 'droppable-cell-candrop', 
     hoverClass: 'droppable-cell-hover', 
     tolerance: 'pointer', 

     drop: function(event, ui) 
     { 
      //function to save change 
     }); 
    }); 
}); 

참고이 단순화된다, 그런 다음 내가 jQuery를 1.3.1와 jQuery를 UI의 1.6rc6를 사용하고

<table> 
    <tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr> 
    <tr><th scope="row">row 1</th> 
     <td class="droppable-cell"> 
      <div class="draggable-item">item A</div> 
      <div class="draggable-item">item B</div> 
     </td> 
     <td class="droppable-cell"></td> 
    </tr> 
    <tr><th scope="row">row 2</th> 
     <td class="droppable-cell"></td> 
     <td class="droppable-cell"> 
      <div class="draggable-item">item C</div> 
      <div class="draggable-item">item D</div> 
     </td> 
    </tr> 
</table> 

암호.

내 문제는 FX, Safari, Chrome 등 (모든 괜찮은 브라우저)에서 제대로 작동한다는 것입니다.

IE는 정말 어려움을 겪습니다. 5x5 테이블을 사용하면 드래그 시작시 IE의 지연이 눈에.니다. 어쩌면 100 개 항목이있는 10x10 표에서 드래그 시작으로 브라우저가 중단됩니다.

최대 20x15 셀을 지원할 수 있고 최대 500 개의 항목을 지원할 수 있기를 원합니다. 그것이 있어야하는 것처럼 보이지 않습니다.

내가 잘못 했나요? 이 같은 IE에서 페이지를 느리게하지 않는 방법이 있나요?

Answer 1

이 정확한 문제는 iGoogle 및 다른 simliar 앱이 가장자리 주위에 점선이있는 투명 상자를 사용하는 이유입니다. IE는 위에서 설명한 문제 때문에 전체 개체를 끌 수 없습니다.

Answer 2

테이블 렌더링이 될 수 있습니다. 테이블없이 시도 할 수 있습니까?

당신의 세포 크기가 동일한 경우, 당신이 그들을 떠있는 테이블과 같은 화면을 얻을 수 있습니다

<style> 
.droppable-cell{ 
    float:left; width: 50%; height: 20px; border: 1px solid black; 
} 
</style> 

<div class="droppable-cell"> 
     <div class="draggable-item">item A</div> 
     <div class="draggable-item">item B</div> 
</div> 
<div class="droppable-cell"></div> 
<div class="droppable-cell"></div> 
<div class="droppable-cell"> 
     <div class="draggable-item">item C</div> 
     <div class="draggable-item">item D</div> 
</div> 

'고정'으로 table-layout 스타일을 설정해야합니다 테이블을한다 사용하고 세포의 크기를 지정 할 수있다하면 도움.

Answer 3

jQuery가 검색해야하는 DOM 부분을 좁히면 도움이 될 수 있습니다.

<table id="myTable"> 

그런 다음이 컨테이너 내에서 요소를 찾기 위해 jQuery를 선택을 변경 포함하는 DOM 요소에 ID를 추가

$j('#myTable .draggable-item').each(function() { ... 

Answer 4

주위에 낙하 할 정의에서 'activeClass'을 떨어지고, 만 사용하여 내 작업 'hoverClass'.

약 10 개의 열이있는 약 150 개의 행에 대한 표에 나와 있습니다. 그것은 10 초 지연에서 1 미만으로 갔다. 끌기는 조금 덜컹 거림하지만 사용할 수는 없다.