Jquery：在slidetoggle div内可排序

Question

我正在使用 jquery 构建一个新的 UI，但在使用滑动切换显示的 div 中使用 .sortable 时遇到了一些问题。 这是 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 时，Feature 会按预期向下滑动，但动画完成后它会立即塌陷，但 Feature div 的内容仍然可见。列表项仍然可以拖动，我可以将它们放到 Sprintcontainer 中。

如果我将溢出：隐藏添加到功能，该功能将根据需要显示，但是一旦我尝试将列表项拖到 SprintContainer 中，该项目似乎在 FeatureContainer 后面，我看不到它是拖动直到我在 sprint 容器上释放鼠标，此时列表项按预期出现在 sprint 容器中。

slidetoggle div 中是否可以有一个可排序的列表？

Answer 1

当您使用溢出：隐藏时，请尝试使用 'appendTo: document.body'

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

它将解决您在 FeatureContainer 后面的项目的问题