javascript - JQuery可排序列表记录增量问题

Question

我正在底部容器中的两个容器之间执行拖/放和可排序操作，我将列表记录拖放到顶部容器中的顶部容器中，我正在使用 JQUERY UI 执行排序操作。

将内容从一个 div 部分拖放到另一个 div 部分之间一切都很好，但在进行排序操作时，每次我随机播放列表记录时，我的列表记录都会创建重复列表，请有人帮助我解决此问题谢谢!!

在检查元素中我发现了这个错误

HTML

<ol id="sortable"></ol>
<ul id="draggable">
    <?php 
        for($i=1;$i<=35;$i++)
        {
        ?>  
            <li id='article_<?php echo $i;?>' class="draggable_li qitem" >
                <div class="main_div">
                    <div class="secondary_div">
                        <div class="form_div">
                            <form>
                                <input style="width:15px;" type="checkbox"/>
                            </form>
                        </div>
                        <div class="item_div">
                            <span class="item">Item = <?php echo $i; ?></span>
                        </div>
                    </div>
                    <div class="hello btn btn-success">
                        Add to Top Stories
                    </div>
                </div>
            </li>
        <?php
        }
    ?>
</ul>

JQuery

   $(document).ready(function() 
   {
    $("#sortable").sortable(
    {
        revert: true,
        refreshPositions: true ,
        helper : 'clone',
        cursor: "move",
        delay: 1,
        tolerance: 'pointer',
        revert: 50
    });

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

    $(".qitem").draggable({
        //containment : "#container",
        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' ); //this will not append dragged list at top of the container
                ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
                return true;
            }
        }
    });
});

Answer 1

由于我要走了，所以暂时将其留在这里，因此没有时间在 drop:function() 中输入。但它应该是直接的。

但问题是你不应该同时声明可排序和可删除。

要解决您的问题，只需添加 connectToSortable:'#sortable', 并删除 droppable

$("#sortable").sortable(
    {
        revert: true,
        refreshPositions: true,
        helper : 'clone',
        cursor: "move",
        delay: 1,
        tolerance: 'pointer',
        revert: 50
    }).disableSelection();
$("#sortable").sortable(
{
    revert: true,
    refreshPositions: true,
    helper : 'clone',
    cursor: "move",
    delay: 1,
    tolerance: 'pointer',
    revert: 50
}).disableSelection();

$(".qitem").draggable({
    //containment : "#container",
    connectToSortable:'#sortable',
    tolerance:"pointer",
    helper : 'original',
    //refreshPositions: true ,
    revert : 'invalid',
    opacity:.4,
});

https://jsfiddle.net/4n9fn8ou/2/