title: How to use jQuery UI Sortable to intersect properly?
body: <p>Here's my attempt at animating jQuery UI Sortable:<br>
  <a href="https://codepen.io/anon/pen/YdMOXE" rel="nofollow noreferrer">https://codepen.io/anon/pen/YdMOXE</a></p>
  
  <pre><code>var startIndex, changeIndex, uiHeight;
  
  $('ul').sortable({
      'placeholder': 'marker',
      start: function(e, ui) {
  
          startIndex = ui.placeholder.index();
          uiHeight = ui.item.outerHeight(true);//get offset incl margin
  
          ui.item.nextAll('li:not(.marker)').css({
              transform: 'translateY(' +uiHeight+ 'px)'
          });
  
          ui.placeholder.css({
              height: 0,
              padding: 0
          });
      },
      change: function(e, ui) {
  
          changeIndex = ui.placeholder.index();
  
  
          if (startIndex &gt; changeIndex) {
  
              var slice = $('ul li').slice(changeIndex, $('ul li').length);
  
              slice.not('.ui-sortable-helper').each(function() {
                  var item = $(this);
                  item.css({
                      background:'lightcoral',
                      transform: 'translateY(' +uiHeight+ 'px)'
                  });
              });
  
          } else if (startIndex &lt; changeIndex) {
  
              var slice = $('ul li').slice(startIndex, changeIndex);
  
              slice.not('.ui-sortable-helper').each(function() {
                  var item = $(this);
                  item.css({
                      background: 'lightgreen',
                      transform: 'translateY(0px)'
                  });
              });
          }
  
          startIndex = changeIndex
      },
      stop: function(e, ui) {
          $('.ui-sortable-handle').css({
              background: 'lightblue',
              transform: 'translateY(0)'
          })
      }
  });
  </code></pre>
  
  <p>Unfortunately it does not work reliably with <code>tolerance: intersect</code>. (sorting to change when <code>50%</code> of the element is overlapping). It seems to want to sort only via pointer location. Attached is a video to show this. <a href="https://gfycat.com/WatchfulPresentHedgehog" rel="nofollow noreferrer">https://gfycat.com/WatchfulPresentHedgehog</a></p>
  
  <p>How do I get this to work correctly with intersect?</p>