Question

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

将内容从一个div部分拖放到另一个div部分之间的一切都很好但是在进行排序操作时我的列表记录正在创建重复列表每次我洗牌列表记录时请有人帮我解决这个问题谢谢！

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

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/

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

1 个答案: