Question

我在Jquery UI中使用sortable。每次我从resultPos获取值时，它都会给我最后一步，但记住最后一个订单。我需要重置它。

例如，我有3个元素：

Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=2&end=3
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2

我需要回复以下内容：

Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2
Again ...
Move 3rd element to 2nd position: end=1&end=3&end=2

这是我的代码：

$( ".sortableChip" ).sortable({
        revert: true,
        containment: "#carousel",
        axis: "x",
        items: 'li.edited',
        tolerance: 'pointer',
        placeholder: 'draggin-space',
        start: function(event, ui) { 
             var startPos = $('.sortableChip').sortable('serialize',{ key: 'start'});
        },
        sort: function(event, ui) {
            ui.item.addClass('draggin');
            $('.remove-chart').hide();
        },
        update: function(event, ui) {
            var resultPos = $('.sortableChip').sortable('serialize',{ key: 'end'});
            ui.item.removeClass('draggin');
        }
    });

Answer 1

jquery UI中可排序的每个项目都是LI，有几种方法可以做到，一种方法是在页面最初加载时保存一个具有可排序列表内容的变量，就像文档就绪部分一样。它所做的就是重新排列ul标签内的li标签的顺序。

<script type="text/javascript">

    $(document).ready(function(){


         $('#link').click(function(){

            //this will empty out the contents of the ul
            $('.sortableChip').html('');
            /*this will replace the contents of the ul with 
            contents that were caputred 
            */
            $('.sortableChip').html(reset);

        });

    });

    var reset = $('.sortableChip').html();
    /*this is here at the bottom because you want to everything that is created     
    dynamically with jquery or javascript to be captured also.
    */
</script>

你所做的一切就是在点击链接后返回正确的设置，就这样，你实际上不需要这行`$（'。sortableChip'）。html（''）; 但我把它放在这里，所以你知道它被清空并取代了

如果需要根据您点击的内容进行排序，则可以将您想要的状态保存为重置等变量，只需清除内容并根据用户点击的内容加载变量

从Jquery UI Sortable重置位置

1 个答案: