Jquery：可排序內滑動div

Question

我正在構建一個新的用戶界面使用jquery和我有一些麻煩使用.sortable內部使用幻燈片切換顯示的div。 下面是HTML（MVC剃刀）：

<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的：

$(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中。

如果我添加overflow：隱藏到Feature中，該功能將根據需要顯示，但只要我嘗試將列表項拖到SprintContainer中，該項目似乎會落在FeatureContainer後面，我看不到它被拖動直到我將鼠標釋放到sprint容器上，此時列表項按預期出現在sprint容器中。

是否有可能在slidetoggle div內有一個可排序的列表？

Answer 1

當您使用溢出：隱藏，請嘗試使用 'appendTo：document.body的'

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

這既解決了該項目的背後去FeatureContainer