Jquery On Drag event show less and remove button class on Element id grid

Question

I am using this jquery function to show more or less on a unordered list id grid
which works fine

   $('#grid').each(function() {
       var $list = $(this);
       $list.before('<button class="more_less">More</button>');
       $list.find('.grid-item:gt(2)').hide();
   });


  $('.more_less').click(function() {
      var $btn = $(this);
      $btn.next().find('.grid-item:gt(2)').slideToggle();    
      $btn.text($btn.text() == 'More' ? 'Less' : 'More');    
  });

Issue to be resolved: Due to space constraints, when I drag and drop the object containing the list content I require on the drag event below to show less and the generated More less button to be removed.

$('#grid ').draggable({
      revert:true,
      proxy:'clone',
      onStartDrag: function(){
          $(this).draggable('options').cursor = 'not-allowed';
          $(this).draggable('proxy').css('z-index',10);
      }  
});

I'd imagine the correct code would be placed here to remove <button class="more_less">

Answer 1

You should add a handler for the start event as in the example below.

$('#grid ').draggable({
    revert:true,
    proxy:'clone',
    start: function(event, ui){
        ui.helper.find('.more_less').hide();
        ui.helper.find('.grid-item:gt(2)').hide();
    }
});