JQuery sortable Disable sorting when only one element exists

Question

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.

It would be great, if you post the HTML part as well. Or create a fiddle for better understanding of the issue. — Parkash Kumar
– Parkash Kumar, Commented Nov 16, 2015 at 12:08

GunJan Mehta · Accepted Answer · 2015-11-16 12:06:46Z

2

I think you may use the length function

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

answered Nov 16, 2015 at 12:06

GunJan Mehta

3122 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barry Mc Gettigan Over a year ago

Thanks for your help. Where you have specified "your code", is that where I put my start function or is it everything that comes after my draggable_teams declaration. cheers

Barry Mc Gettigan · Accepted Answer · 2015-11-17 10:31:41Z

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

Collectives™ on Stack Overflow

JQuery sortable Disable sorting when only one element exists

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related