0

jquery を使用して新しい UI を構築していますが、スライド トグルを使用して表示される div 内で .sortable を使用する際に問題が発生しています。HTML（MVC Razor）は次のとおりです。

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

そして、relevent 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 にドロップできます。

Overflow:hidden をフィーチャーに追加すると、フィーチャーは希望どおりに表示されますが、リスト項目を SprintContainer にドラッグしようとするとすぐに項目が FeatureContainer の背後にあるように見え、ドラッグされるまでは表示されません。スプリント コンテナ上でマウスを離すと、期待どおりにリスト アイテムがスプリント コンテナに表示されます。

slidetoggle div内にソート可能なリストを含めることは可能ですか?

4

1 に答える 1

1

overflow:hidden を使用している場合は、「appendTo: document.body」を使用してみてください

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

FeatureContainerの背後にあるアイテムの問題を解決します

于 2013-01-25T06:12:49.810 に答える