Question

我必须在底部有两个div部分TOP和BOTTOM我有3个列表记录，带有复选框和按钮。

我的要求是当我点击按钮时将点击的记录添加到顶部div部分

请有人帮助我谢谢！

Html代码

   <div style="border:1px solid #eee;">
<ol style='list-style:decimal;border-bottom:1px solid #e7e7e7;' id="sortable">

</ol> <br/>
</div>
 <br/>


<div>
        <ul id="draggable">
            <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
                <div class="qitem" style='margin-bottom : 20px;'>
                    <label>
                        <input class="hello" type="checkbox"/>Value 1
                    </label>
                    <button class="hello" style="float:right;">Add To Top Section</button>
                </div>
            </li>
            <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
                <div class="qitem" style='margin-bottom : 20px;'>
                    <label>
                        <input class="hello" type="checkbox"/>Value 2
                    </label>
                    <button class="hello" style="float:right;">Add To Top Section</button>
                </div>
            </li>
            <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;">
                <div class="qitem" style='margin-bottom : 20px;'>
                    <label>
                        <input class="hello" type="checkbox"/>Value 2
                    </label>
                    <button class="hello" style="float:right;">Add To Top Section</button>
                </div>
            </li>
        </ul>
    </div>

JQuery代码

$(document).ready(function() 
        {
        $("#sortable").sortable({
                revert: true,
                refreshPositions: true ,
                helper : 'clone',
                tolerance: 'pointer',
                revert: 20
        });

        $("#sortable").disableSelection();

        $(".qitem").draggable({
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $("#sortable").droppable({
            revert:true,
            hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.AH_section').show();
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul'));
                    return true;
                }
            }
        });
    });

Answer 1

这应该可以解决问题：

$("button").click(function () {
    $("#sortable").append("<li>item</li>");
});

https://jsfiddle.net/oa2hfLum/

使用jQuery在单击按钮上将内容添加到顶部div部分

1 个答案: