Question

我有一个sortable堆栈，需要按照字母顺序作为游戏创意。我想要做的是，一旦他们将最后一个元素（在这种情况下，'zebra'）拉到最后一个位置，就会向用户弹出成功警报或确认。

任何人都可以告诉我如何设置它，以便当用户按顺序拉入斑马作为最后一个框时，警告会告诉他们成功等等吗？

如果您有任何其他想法可以更好地实现这一点，请告诉我们！

<p>In the boxes below, sort  by alphabetical order</p>
        <ul id="sortable">  
            <li class="ui-state-default">Aardvark</li> 
            <li class="ui-state-default">Cat</li> 
            <li class="ui-state-default">Dog</li>  
            <li class="ui-state-default">Giraffe</li>  
            <li class="ui-state-default">Horse</li> 
            <li class="ui-state-default">Monkey</li>  
            <li class="ui-state-default">Panda</li>
            <li class="ui-state-default">Zebra</li>
         </ul> 


$(function() {
    $( "#sortable" ).sortable({

    });
});

$(function() {
    $(function() {
        $('#sortable').randomize('.ui-state-default');
    });
});


(function($) {
    $.fn.randomize = function(childElem) {
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

            elems.sort(function() { return (Math.round(Math.random())-0.5); });  

            $this.remove(childElem);  

            for(var i=0; i < elems.length; i++)
                $this.append(elems[i]);      
            });    
        }
})(jQuery);

Answer 1

我会检查每一种，看看整个清单是否有序。只是检查最后一个元素似乎已经足够了。

http://jsfiddle.net/fdWP9/

$("#sortable").sortable({
    stop: function( event, ui ) {
        var inorder = true,
            $kids =  $(ui.item).parent().children(),
            current = null;
        $($kids).each(function() {
            if (current) {
                if ($(this).text() < current) {
                    inorder = false;
                    return;
                }
            }
            current = $(this).text();
        });

       if (inorder) alert('Yippee');
    }
});

$.fn.randomize = function (childElem) {
    return this.each(function () {
        var $this = $(this);
        var elems = $this.children(childElem);

        elems.sort(function () {
            return (Math.round(Math.random()) - 0.5);
        });

        $this.remove(childElem);

        for (var i = 0; i < elems.length; i++)
            $this.append(elems[i]);

    });
}

$(function () {
    $('#sortable').randomize('.ui-state-default');
});

Answer 2

在可排序的选项中，添加一个停止处理程序并将逻辑放在那里：

$( "#sortable" ).sortable({
  stop: function(event, ui) {
      //check if this element is the last li
      //if so, check that it is your defined answer
  }
});

jQuery可排序的成功警报

2 个答案: