Question

有2个div容器顶部和底部，包含ul标签。

我的要求是当记录被拖到第一个容器上时，即使在底部容器中也必须保留相同的记录。 Top Container记录应该是可排序的，但bottom仅用于将记录拖到顶部容器，而底部容器不可排序。

顶部容器 - ＆gt;排序

底部容器 - ＆gt;不可排序（不需要）

拖动 - ＆gt;仅从下到上发生（当拖动的记录应保留在顶部和底部时）

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

 <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

您可以使用connectToSortable选项。然后，您的克隆将被保留并简化您的代码。像这样：

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

如果您尝试将Bottom容器中的项目附加到Top容器，但保留原始容器的完整性，则需要执行的操作不是：

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

这样做：

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

以下是工作示例： http://jsfiddle.net/bbhrsn9u/1/

Jquery UI拖放，删除和排序（保留拖动的项目）

2 个答案: