jQuery Sortable with collapsed content

Question

I want to use jQuery sortable function to all a user to arrange boxes. Simple enough. The boxes can get quite tall, however, so when they click on the handle to sort, I'd like all of the boxes to collapse. I got something working (shown below). When you try sorting the first row, everything works great. But anything below that and it gets a little weird.

First off, is there a better way to do this that I'm not thinking of?

Second, if I'm staying with this code, is there a way to make sure the now collapsed div that is select snaps to and stays with the mouse? If you look at it now, when you select a div not from the first row, the selected div is a lot higher than where the mouse is (because of the collapsing).

The jsFiddle: http://jsfiddle.net/cwv9usqf/5/

$('.header').mousedown(function(){ $('.content').hide(); })

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  stop: function(){ $('.content').show(); }
});

Another note: right now when you simply click on the header, the portlets collapse. Is there a way I can only have them collapse when the drag is happening?

Thanks in advance!

Answer 1

I figured it out:

(updated Fiddle) http://jsfiddle.net/cwv9usqf/6/

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  revert: true,
  placeholder: 'placeholder',
  start: function(){ $('.content').hide(); },
  stop: function(){ $('.content').show(); }
});

I added the 'start' option to it and removed the mousedown/mouseup listeners all together.

Answer 2

A couple things:

1. I made your elements unselectable that way you don't accidentally highlight it.
2. I changed it to an unordered list, to remove repetitive code.
3. I made the cursor to a pointer as that is pretty standard for intractable items.
4. I used flex instead of px values for the sake of making a dynamic webpage.

 $("#sortable").sortable({ revert: true }); 

 #sortable { width: 100%; list-style-type:none; display: flex; justify-content: space-between; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ -o-user-select: none; user-select: none; } #sortable > li { float: left; cursor: pointer; padding: 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="demo"> <div> <ul id="sortable"> <li>Home</li> <li>Contact Us</li> <li>About</li> </ul> </div> </div>