CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortable
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery Sortable - Move item to top of list if dragged out.

Hi I am using jQuery Sortable, I have two lists which are filled with banners and the order of the banners in the "Selected Banners" are able to be changed. We have 3 sets of banners:

I have two lists one called Available Banners and the Other Called Selected Banners. The Default Banners are defined in red and can be removed if two or more are present.

However when I remove these default banners they are either placed at the bottom of the list of they are placed in the position I place them, depending on the precision of the drop.

Is their a way using jQuery I can move all items with the class name of defaultbanner to the top of the list in #sortable2?

My code is below or you can view my JSFiddle

JS.js

$( document ).ready(function() {
    $(function() {
    $("#sortable1").sortable({
      cancel: ".ui-state-disabled",
      handle: ":not(input)"
    });

  $("#sortable2").sortable({
        cancel: ".ui-state-disabled",
          receive: function (event, ui) {
           if (ui.item.hasClass("defaultbanner")) {
           $(ui.sender).sortable('cancel');
           alert("This is a default banner, it can be sorted but not removed.");
       }
   }
      });

  //new function to define that if a Partner has more than 2 selectable banners then the defaultbanner. If less than two selectable banners than the default banner cannot be

  $("#sortable2").sortable({
    cancel: ".ui-state-disabled",
      receive: function (event, ui) {
       if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
           $(ui.sender).sortable('cancel');
           alert("This is a default banner, it can be sorted but not removed.");
       }
       else if($('#sortable1 li').length <= 1) {
          $(ui.sender).sortable('cancel');
          alert('You must have at least two banners');    
      }
       }
  });

  $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
  }).disableSelection();

  $("#sortable1 li,#sortable2 li").disableSelection();

  // no more than 7 banners allowed 
  $("#sortable1").sortable({
        connectWith: '.connectedSortable',
        //receive: This event is triggered when a connected sortable list has received an item from another list.
        receive: function(event, ui) {
            // so if > 7
            if ($(this).children().length > 7) {
                //ui.sender: will cancel the change. Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
            alert('Your selection has been cancelled. A maximum 7 banners are allowed in the carousel.');
        }
        if ( $('#sortable1 .selectablebanner').length > 4) {
            alert('Your selection has been cancelled. A maximum 4 custom banners are allowed in the carousel.');
            $(ui.sender).sortable('cancel');
        }  
    }
}).disableSelection();
});

});

Upvotes: 1

Views: 1345

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Yes, just add a pseudo sorting function as the last call of receive

function doSortMe(){
        console.log('sorting');
         $('#sortable2').prepend($('#sortable2 .defaultbanner'));  
    }
/////    .....
        $("#sortable2").sortable({
            cancel: ".ui-state-disabled",
            receive: function (event, ui) {
                if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert("This is a default banner, it can be sorted but not removed.");
                } else if ($('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert('You must have at least two banners');
                }
                doSortMe(); //<-- Added call here
            }
        });

Demo: http://jsfiddle.net/robschmuecker/J9eQL/2/

Upvotes: 2

Related Questions