JQuery UI 拖放和排序

Question

我正在使用 JQuery UI 可拖動/可丟棄和可排序操作。

我有兩個部分頂部/底部我正在將列表記錄從底部拖到頂部在頂部我正在執行排序

目前一切正常，但當我對列表記錄進行排序時，我在頂部的排序操作中發現了一個問題

假設我將記錄 3 放入檢查元素中的記錄 1 我拖動的記錄 3 正在復制其記錄（創建它的一個副本）我希望在排序時不應復制/克隆列表記錄 請有人幫我解決這個問題謝謝！

http://jsfiddle.net/BCnyU/204/

列出復制快照的記錄

html

<div class="drop_list">
        <ol id="sortable" style="list-style:decimal;">
            <?php 
            for($i=1;$i<=2;$i++)
            {
            ?>  
                <li id='arrayorder_<?php echo $i;?>' class="draggable_li qitem">
                    <div class="main_div">
                        <div class="secondary_div">
                            <label class="item_div">
                                <span class="item">Item = <?php echo $i; ?></span>
                            </label>
                        </div>
                    </div>
                </li>
            <?php
            }
        ?>
        </ol>
    </div>
    <div class="sort_list">
    <ul id="draggable">
        <?php 
            for($i=1;$i<=5;$i++)
            {
            ?>  
                <li id='arrayorder_<?php echo $i;?>' class="draggable_li qitem">
                    <div class="main_div">
                        <div class="secondary_div">
                            <label class="item_div">
                                <span class="item">Item = <?php echo $i; ?></span>
                            </label>
                        </div>
                    </div>
                </li>
            <?php
            }
        ?>
    </ul>
    </div>

查詢

<script type="text/javascript">

       $(document).ready(function() {

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

        $("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).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); 
                    return true;
                }
            }
        });
    });
    </script>

Answer 1

發生這種情況是因為您正在對刪除的元素進行clone 。 取而代之的是：

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

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