Jquery : slidetoggle div 내 정렬 가능

Question

jquery를 사용하여 새 UI를 작성 중이며 슬라이드 토글을 사용하여 표시되는 div 내부에서 .sortable을 사용하는 데 문제가 있습니다.

<div style="float:left; width:200px; margin-right:5px" > 
    <div class="FeaturesContainer"> 
    <b>Project backlog</b><br /> 
     @foreach (var feature in Model.Managment.tasksByFeature) 
     { 
      if (feature.Value.Count != 0) 
      { 
       <div class="FeatureContainer"> 
        <div class="FeatureHeading" id="@feature.Key.id"> 
         <div class="icon" style="float:right"> 
          <img width="20" src="../../Content/images/down.png" /> 
         </div> 
         <span class="FeatureTitle">@feature.Key.summary</span>  
        </div> 
        <div class="Feature"> 
         <ul class="drop"> 
         @foreach (var task in feature.Value) 
          { 
           <li class="taskItem"> 
            @Html.ActionLink(task.summary, "Task", new { proj = Model.Managment.project.Id, id = task.id })<br /> 
            Effort: @task.Effort 
           </li> 
          } 
         </ul> 
        </div> 
       </div> 
      } 
     } 
    </div> 
</div> 

<div style="float:left; width:190px;"> 
    <div class="SprintContainer" id="@Model.Managment.sprint.Id"> 
     <b>Tasks for this sprint</b><br /> 
     <ul class="drop"> 
     @foreach (var task in Model.Managment.tasksInSprint) 
     { 
      <li class="taskItem"> 
       @Html.ActionLink(task.summary, "Task", new { proj = Model.Managment.project.Id, id = task.id })<br /> 
       Effort: @task.Effort 
      </li> 
     } 
     </ul> 
     Max Effort: @Model.Metrics.Velocity<br /> 
     Total Effort: @Model.Managment.tasksInSprint.Sum(i => i.Effort) 
    </div> 
</div> 

그리고 revlevent의 CSS :

.drop 
    { 
     list-style-type: none; 
     margin: 0; 
     float: left; 
     margin-right: 5px; 
     background: #eee; 
     padding: 5px; 
     width: 158px; 
     min-height:75px; 
    }  

    .drop li 
    { 
     padding: 5px; 
     font-size: .9em; 
     width: 145px; 
     cursor:move; 
    } 

    .highlight 
    { 
     border: 1px dashed #3E3E3E; 
     height:50px; 
     margin-bottom:2px; 
    } 

    .FeaturesContainer 
    { 
     background-color:#FFFFFF; 
     border: 2px solid #3E3E3E; 
     color:#FE7F00; 
     padding:5px; 
     -moz-border-radius: 4px; 
     border-radius: 4px; 
     margin: 0 0 10px 0; 
    } 

    .SprintContainer 
    { 
     background-color:#FFFFFF; 
     border: 2px solid #3E3E3E; 
     color:#FE7F00; 
     padding:5px; 
     -moz-border-radius: 4px; 
     border-radius: 4px; 
     margin-bottom:10px; 
     margin-right: 5px; 
    } 

    .FeatureContainer 
    { 
     background-color:#BEBEBE; 
     border: 1px solid #3E3E3E; 
     color:#FE7F00; 
     padding:5px; 
     margin-bottom:10px; 
     margin-top:5px; 
     margin-right: 5px; 
    } 

    .FeatureHeading 
    { 
     padding: 5px 10px; 
     cursor: pointer; 
     position: relative; 
     margin:1px; 
     color:#FFFFFF; 
     background-color:#006600; 
     border-left: 1px solid #3E3E3E; 
     border-right: 1px solid #3E3E3E; 
     border-top: 1px solid #3E3E3E; 
    } 

    .Feature 
    { 
     padding:0; 
     margin:0 0 0 0; 
     position:relative; 
     border-left: 1px solid #3E3E3E; 
     border-right: 1px solid #3E3E3E; 
     border-bottom: 1px solid #3E3E3E; 

    } 

그리고 jQuery를 : 가 여기에 HTML (MVC 면도기)입니다

$(function() { 
    $("ul.drop").sortable({ connectWith: "ul", dropOnEmpty: true, placeholder: "highlight" }); 
}); 

$(document).ready(function() { 
     var visible = true; 
     $(".Feature").hide(); 

     $(".FeatureHeading").click(function() { 
      $(this).next(".Feature").slideToggle(function() { 
       visible = !visible; 
       $(this).css({'height': 'auto'}) 
       if (visible) { 
        $('img', this).attr('src', '../../Content/images/down.png'); 
       } 
       else { 
        $('img', this).attr('src', '../../Content/images/up.png'); 
       } 

      }); 
     }); 
}); 

문제이다, 나는 FeatureHeading을 클릭하면, 피쳐가 예상대로 슬라이드되지만 애니메이션이 완료 되 자마자 바로 축소됩니다. 그러나 피쳐 div의 내용은 계속 표시됩니다. 목록 항목은 여전히 ​​드래그 가능하며 Sprintcontainer에 놓을 수 있습니다.

피쳐에 오버플로 : 숨김을 추가하면 피쳐가 원하는대로 표시되지만 목록 항목을 SprintContainer로 드래그하면 피쳐가 FeatureContainer 뒤에 표시되고 볼 수 없습니다 Sprint 컨테이너 위로 마우스를 놓을 때까지 드래그됩니다.이 시점에서 목록 항목은 예상대로 스프린트 컨테이너에 나타납니다.

slidetoggle div 안에 정렬 가능한 목록을 포함 할 수 있습니까?

Answer 1

당신이 오버 플로우 사용하는 동안 : 숨겨진 사용해보십시오 'appendTo :는 document.body'

http://api.jqueryui.com/sortable/#option-appendTo

이 항목이 FeatureContainer