Jquery UI Drag, Drop and Sortable (Retaining the dragged item)

Question

There are 2 div Container top and botton which contains ul tag.

My requirement is when record is dragged onto 1st container the same record has to be retained even in bottom container. Top Container records should be sortable but bottom is used only for dragging the record to top container and bottom container is not sortable.

Top Container -> Sortable

Bottom Container -> Not Sortable (not needed)

Drag -> Happens only from bottom to top (when dragged record should be retained on top and bottom)

Jsfiddle Link http://jsfiddle.net/bbhrsn9u/

    <script type="text/javascript">

       $(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
            helper : 'clone',
            revert :10          
        });


        $("ol li").disableSelection();

        $(".sort_list li").draggable({

            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $(".drop_list ol").droppable({
            revert:true,

            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).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')); //this will append dragged list at top of the container
                    return true;
                }
            }
        });
    });
    </script>

HTML Code

 <div class="drop_list">
        <ol id="sortable" style="list-style:decimal;">
            <li id='item1' class="draggable_li qitem">
                <span class="item">Item = 1</span>
            </li>
            <li id='item2' class="draggable_li qitem">
                <span class="item">Item = 2</span>
            </li>
            <li id='item3' class="draggable_li qitem">
                <span class="item">Item = 3</span>
            </li>
            <li id='item4' class="draggable_li qitem">
                <span class="item">Item = 4</span>
            </li>           
        </ol>
    </div>

    <div class="sort_list">
    <ul id="draggable">
        <li id='item1' class="draggable_li qitem">
            <span class="item">Item Dragged = 1</span>
        </li>
        <li id='item2' class="draggable_li qitem">
            <span class="item">Item Dragged = 2</span>
        </li>
        <li id='item3' class="draggable_li qitem">
            <span class="item">Item Dragged = 3</span>
        </li>
        <li id='item4' class="draggable_li qitem">
            <span class="item">Item Dragged = 4</span>
        </li>   
        <li id='item5' class="draggable_li qitem">
            <span class="item">Item Dragged = 5</span>
        </li>       
    </ul>
    </div>

Snapshot

Answer 1

You could use connectToSortable option. Then your clone would be kept and simplify your code. Like this:

 $(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
            helper : 'clone',
            revert :10          
        });


        $("ol li").disableSelection();

        $(".sort_list li").draggable({

            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
            connectToSortable: '#sortable'
        });


    });

http://jsfiddle.net/t0ndh136/1/

Answer 2

If you are trying to append the items from the Bottom container to the Top container but leaving the original ones intact what you need to do is instead of:

$(ui.draggable).appendTo(this);

do this:

$(ui.draggable.clone()).appendTo(this);

Here is the working example: http://jsfiddle.net/bbhrsn9u/1/