Question

我有两个div容器

top_div
bottom_div

最初top_div将为空。我正在使用jQuery UI拖放。我可以将内容从bottom_div拖到top_div。

我的要求是在上面top_div我需要对内容进行排序（使用可排序的jQuery UI）。在我刷新页面后排序后，它不应该改变它的位置。

请提供任何帮助谢谢！

Html代码

<div id="top_div">

</div>
<br/>
<div id="bottom_div">
    <ul>
        <li class="ui-state-default">Sachin Tendulkar</li>
        <li class="ui-state-default">Ab de Villiers</li>
        <li class="ui-state-default">MS Dhoni</li>
        <li class="ui-state-default">Ricky Ponting</li>
        <li class="ui-state-default">Rahul</li>
    </ul>
</div>

Jquery代码

<script type="text/javascript">
    $(function () 
    {
        $("#bottom_div li").draggable({
            tolerance:'fit',
            revert: "invalid",
            refreshPositions: true,
            drag: function (event, ui) 
            {
                ui.helper.addClass("draggable");
            },
            stop: function (event, ui) 
            {
                ui.helper.removeClass("draggable");
            }
        });
        $("#top_div").droppable(
        {
            drop: function (event, ui) 
            {
                if ($("#top_div li").length == 0) 
                {
                    $("#top_div").html("");
                }
                ui.draggable.addClass("dropped");
                $("#top_div").append(ui.draggable).sortable();
            }
        });
    });
</script>

Jquery ui拖放和排序

0 个答案: