why unselection is not working for multiple items with selectable and draggable

Question

i want my unselection of list items work as smooth as .selectable() without .draggable()

My expectation is something like below gif with selectable and draggable combined:

here above code without draggable:

   $("#selectable").selectable();

  #feedback {
      font-size: 1.4em;
  }
  #selectable .ui-selecting {
      background: #FECA40;
  }
  #selectable .ui-selected {
      background: #F39814;
      color: white;
  }
  #selectable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
  }
  #selectable li {
      margin: 3px;
      padding: 0.4em;
      font-size: 1.4em;
      height: 18px;
  }






    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7

Question: the below combined selectable and draggable selection and unselection is not working as above code with only selectable

here is what i have tried:

$(function() {
    $( "#selectable" ).selectable({
           start: function (event, ui) {
                 /* $('.ui-widget-content').draggable('destroy') */;
             },
       stop: function(event,ui){
           $('.ui-widget-content').draggable({
               drag: function(event,ui){
                  console.log('dragging....');
                  $('#multiple_selected_rows').remove();
                  var elem = document.createElement("div");
                  elem.id = "multiple_selected_rows";
                  elem.innerText = $('li.ui-selected').length+" items";
                  document.body.appendChild(elem);
                  
                   $("#multiple_selected_rows").css({ 'top': event.clientY + 10, 'left': event.clientX + 10 });
               }
           });
           $( "#selectable" ).selectable();
       }
    });
    
    $('#droppable').droppable({
        accept: '.ui-widget-content',
        greedy: true,
        drop: function (event, ui) {
           $('#multiple_selected_rows').remove();
        }   
    });
 });

#feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; /*width: 60%;*/ padding:22px; border: solid 1px #0973c7;}
  #selectable li { margin: 8px; padding:10px; border:solid 1px #CCC;}
  .ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } 

#main-container{
    display: flex;
    justify-content: space-between;
}

div#main-container .demo {
    width: 50%;
    margin-right: 7px;
}

div#main-container #droppable {
    flex: 1;
    border: 1px solid red;
}

#multiple_selected_rows{
   position:absolute;
   width: 90px;
   height:40px;
   background:red;
   color: #fff;
   text-align: center;
}







     
        
          Item 1
          Item 2
          Item 3
          Item 4
          Item 5
          Item 6
          Item 7

Please help me thanks in advance!!!!!

user_1195615 · Answer

Note: The way you are drag selecting multiple items and then immediately selecting only a single item by clicking on it (as shown in the gif) will not be possible if you are going to drag the selected items to another box. You can either drag a selection with selectable(), or drag, i.e. move, your selected items with draggable(), not both.

Your selectable() and draggable() methods are competing with one another for the same mouse events. So instead of setting them up on page load, try this:

In the selectable() stop callback, wrap the selected elements in a div:

$('.ui-selected').wrapAll('');

Then call draggable() on #dragSet. Now this call will take precedence over the selectable() mouse events for the selected items.

In the draggable() stop callback, append the selected items to #droppable and remove their .ui-selected class.

$('#droppable').append( $('#dragSet') );
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');

Finally, add some logic to the selectable() start callback to prevent double wrapping your selection.

if ( $('#dragSet').children().length > 0 ) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();

See working example below:

$(function() {
  $("#selectable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#droppable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#droppable li').removeClass('ui-selected');
        }
      });
    }
  });
});

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*width: 60%;*/
  padding: 22px;
  border: solid 1px #0973c7;
}

#selectable li {
  margin: 8px;
  padding: 10px;
  border: solid 1px #CCC;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

#main-container {
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}

#multiple_selected_rows {
  position: absolute;
  width: 90px;
  height: 40px;
  background: red;
  color: #fff;
  text-align: center;
}

#droppable li.ui-widget-content {
  margin: 8px;
  padding: 10px;
  border: solid 1px #ccc;
  color: white;
  background: green;
}







  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
      Item 7

Bonus:

To drag back and forth, repeat the same JS and swap #selectable with #droppable.

$(function() {
  $("#selectable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#droppable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#droppable li').removeClass('ui-selected');
        }
      });
    }
  });

  $("#droppable").selectable({
    start: function(event, ui) {
      if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
      else $('#dragSet').remove();
    },
    stop: function(event, ui) {
      $('.ui-selected').wrapAll('');
      $('#dragSet').draggable({
        stop: function(event, ui) {
          $('#selectable').append($('#dragSet'));
          $('#dragSet').contents().unwrap();
          $('#selectable li').removeClass('ui-selected');
        }
      });
    }
  });
});

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting,
#droppable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected,
#droppable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable,
#droppable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 22px;
  border: solid 1px #0973c7;
}

#selectable li,
#droppable li {
  margin: 8px;
  padding: 10px;
  border: solid 1px #CCC;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

#main-container {
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}







  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
      Item 7

Selectable and Draggable with selection as shown in the gif:

Normally, you would need to click on the selected items in order to drag them. But since you want to be able to click on them to make a new selection, you'll need to add another element as a handle to drag them by.

$(function() {
  $( "#selectable" ).selectable({      
    start: function (event, ui) {
        if ( $('#dragSet').children().length > 0 ) {
          $('#dragHandle').remove();
          $('#dragSet').contents().unwrap();
        }
        else $('#dragSet').remove();        
    },
    stop: function(event,ui){        
      $('.ui-selected').wrapAll('');
      $('#dragSet').append('Drag Me');
      $('#dragHandle').on('mouseenter', function() {
        $('#dragSet').draggable({
          stop: function(event, ui){            
            $('#droppable').append( $('#dragSet') );
            $('#dragHandle').remove();
            $('#dragSet').contents().unwrap();
            $('#droppable li').removeClass('ui-selected');          
          }
        });
      }).on('mouseleave', function() {
        $('#dragSet').draggable('destroy');
      }); 
    }
  });

  $( "#droppable" ).selectable({      
    start: function (event, ui) {
        if ( $('#dragSet').children().length > 0 ) {
          $('#dragHandle').remove();
          $('#dragSet').contents().unwrap();          
        }
        else $('#dragSet').remove();        
    },
    stop: function(event,ui){        
      $('.ui-selected').wrapAll('');
      $('#dragSet').append('Drag Me');
      $('#dragHandle').on('mouseenter', function() {
        $('#dragSet').draggable({
          stop: function(event, ui){            
            $('#selectable').append( $('#dragSet') );
            $('#dragHandle').remove();
            $('#dragSet').contents().unwrap();
            $('#selectable li').removeClass('ui-selected');          
          }
        });
      }).on('mouseleave', function() {
        $('#dragSet').draggable('destroy');
      });
    }
  });
 });

#feedback { 
  font-size: 1.4em; 
}

#selectable .ui-selecting,
#droppable .ui-selecting { 
  background: #FECA40; 
}

#selectable .ui-selected,
#droppable .ui-selected { 
  background: #F39814; 
  color: white; 
}

#selectable, 
#droppable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  padding:22px; 
  border: solid 1px #0973c7;
}

#selectable li,
#droppable li { 
  margin: 8px; 
  padding:10px; 
  border:solid 1px #CCC;
}

.ui-selectable-helper { 
  position: absolute; 
  z-index: 100; 
  border:1px dotted black; 
} 

#main-container{
  display: flex;
  justify-content: space-between;
}

div#main-container .demo {
  width: 50%;
  margin-right: 7px;
}

div#main-container #droppable {
  flex: 1;
  border: 1px solid red;
}

#dragSet {
  position: relative;
}

#dragHandle {
  position: absolute;
  top: 4px;
  right: 12px;
  background-color: red;
  color: white;
  padding: 6px;
  border: 1px solid black;
}







  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
      Item 7

why unselection is not working for multiple items with selectable and draggable

1 Answers

Bonus:

Selectable and Draggable with selection as shown in the gif: