Sortable jQuery UI에서 잡을 수있는 영역을 확장하는 방법 테이블 머리글이있는 Accordion

Question

헤더의 표와 함께 정렬 가능한 아코디언이 있습니다. 표는 2 열 3 열이며, 중앙 열은 두 행에 걸쳐 있으므로 총 5 요소가됩니다. 중앙 요소에

는 I는 입력 요소 사용 헤더 테이블 도입 후

<div id="accordion" 
    data-bind="jqAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"> 
</div> 

<script type="text/html" id="task-template"> 
    <div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group"> 
     <div class="accordion-header"> 
      <table class="myAccordionHeader" > 
       <tbody> 
        <tr> 
         <td class="left-upper" > 
          <label for="SequenceNo">Seq:</label> 
          <span data-bind="text: SequenceNo"></span> 
         </td> 
         <td class="center" rowspan="2" > 
          <h3><b><input name="TaskName" data-bind="value: TaskName" /></b></h3> 
         </td> 
         <td class="right-upper" colspan="2"> 
          Due: <span data-bind="text: DueDate"></span> 
         </td> 
        </tr> 
        <tr> 
         <td class="left-bottom"> 
          Id: <span data-bind="text: TaskId" ></span> 
         </td> 
         <td class="right-bottom"> 
          Status: <span data-bind="text: TaskStatus"></span> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="myAccordionContent"> 
      <!-- Contents here... --> 
     </div>  
    </div> 
</script> 

를 유일한 스팟 내 아코디언 헤더가 입력 요소 마진이며,에 잡을 수있는 세 번째 열이 시작되기 전에 그면이 시작됩니다.

이것은 테이블 데이터 요소 (<td>)의 기본 이벤트와 관련이 있다고 생각합니다. 다른 <td>은 텍스트로 채워지고 <span> 요소는 녹아웃 변수로 데이터 바인딩됩니다.

아코디언을 "채굴 할 수있는"영역을 확장하는 방법에 대한 단서가 있습니까?

Answer 1

이유는 귀하가 아코디언 요소를 포함하는 click 이벤트를 바인딩하고 있기 때문입니다. 그래서 당신은 div

에 아코디언 헤더에 내가 보는 가장 쉬운 방법은 click 이벤트 풍선을 클릭 한 후에는이 같은, 그 $root.SelectedTask에 결합하는 또 다른 DOM 요소를 추가하는 것입니다

<div data-bind="attr: {'id': 'Task' + TaskId}" class="group"> 
    <a href="javascript:;" data-bind="click: $root.SelectedTask">Any text</a> 
... another html.... 

이보십시오, 나는 그 뜻을 희망 도와주세요.