Barry Mc Gettigan
Barry Mc Gettigan

Reputation: 1

JQuery sortable Disable sorting when only one element exists

I`m trying to disable jquery sortable on a list of items when there is only one item remaining in the list. Here is my code so far:

      $(".draggable_teams").sortable({
                handle: '.team-header .grabber',
                revert: 100,
                tolerance: 'pointer',
                connectWith: '.draggable-team-connector',
                placeholder: 'highlight-teams',


                helper: function (e, ul) {

                    var $originals = ul.children();
                    var $helper = ul.clone();
                    $($helper).find("[teamorder='teamorder']").addClass('clone-teams');

                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                },
                start: function (ul) {
                    $('.clone-teams .team').slideUp(400);
                },
                update: function () {
                    updateListScope();
                    scope.saveTeamOrder();

                }
            }).disableSelection();
        }

Any help at all would be greatly appreciated :) Thanks.

Upvotes: 0

Views: 1228

Answers (2)

Barry Mc Gettigan
Barry Mc Gettigan

Reputation: 1

Managed to figure this out in the end thanks to all your help. Here is my completed code.

       $(".draggable_teams").sortable({
                handle: '.team-header .grabber',
                revert: 100,
                tolerance: 'pointer',
                connectWith: '.draggable-team-connector',
                placeholder: 'highlight-teams',

                start: function () {
                    $('.clone-teams .team').slideUp(400);
                },
                helper: function (e, ul) {
                    var $originals = ul.children();
                    var $helper = ul.clone();
                    $($helper).find("[teamorder='teamorder']").addClass('clone-teams');

                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                },
                update: function () {
                    updateListScope();
                    scope.saveTeamOrder();

                }

            }).disableSelection();
        }

        scope.$watch("teams", function(){
            setSortability();
        });

        function setSortability() {
            if(!scope.teams || scope.teams.length < 2){
                $( ".draggable_teams" ).sortable( "disable" );
            }
            else{
                $( ".draggable_teams" ).sortable( "enable" );
            }
        }

Upvotes: 0

GunJan Mehta
GunJan Mehta

Reputation: 312

I think you may use the length function

if($(".draggable_teams").children('li').length>1)
{ your code }
else{ $( ".draggable_teams" ).sortable( "disable" ); }

Upvotes: 2

Related Questions