jQuery сортируемое оповещение об успехе

Question

jQuery сортируемое оповещение об успехе

0

У меня есть sortable стек, который нужно вытащить в алфавитном порядке в качестве игровой идеи. То, что я пытаюсь сделать, - это получить предупреждение или подтверждение успеха пользователю, когда они вытащит последний элемент (в данном случае "зебра") в последнее место.

Вот jfiddle: http://jsfiddle.net/4uL28/3/

Может ли кто-нибудь сказать мне, как настроить это так, чтобы, когда пользователь тянет зебра в качестве последнего окна в порядке, предупреждение сообщает им успех и т.д.?

Если у вас есть другие идеи, чтобы лучше реализовать это, пожалуйста, дайте мне знать!

<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);

gregjunior 18 апр. 2014, в 22:32

Источник

Теги:

jquery

jquery-ui

jquery-ui-sortable

2 ответа

0

В ваших вариантах сортировки добавьте обработчик остановки и поместите туда свою логику:

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

cmcd 18 апр. 2014, в 18:10

Ещё вопросы

Barbara Laird · Accepted Answer · 2014-04-18T18-24-00.000Z

Я бы проверял каждый вид, чтобы увидеть, был ли весь список в порядке. Просто проверка последнего элемента dosen't кажется достаточно.

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');
});