UI Sortable Collision Fix

Proposed fix for UI Sortable Collision bug

by Daniel Leaver

HTML

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

CSS

#sortable {
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 60%; 
  }

  #sortable li { 
    border: 1px solid #ccc;
      margin: 0 3px 3px 3px; 
      padding: 0.4em; 
      padding-left: 1.5em; 
      font-size: 1.4em; 
      height: 18px; 
  }
  
#sortable li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

$(function() {
  	$("#sortable").sortable({
  		tolerance: "pointer"
  	});
  	$("#sortable").disableSelection();
  });


  /*! jQuery UI - v1.11.4 - 2015-11-27
   * http://jqueryui.com
   * Includes: core.js, widget.js, mouse.js, sortable.js
   * Copyright jQuery Foundation and other contributors; Licensed MIT */

  (function(factory) {
  	if (typeof define === "function" && define.amd) {

  		// AMD. Register as an anonymous module.
  		define(["jquery"], factory);
  	} else {

  		// Browser globals
  		factory(jQuery);
  	}
  }(function($) {
  	/*!
  	 * jQuery UI Core 1.11.4
  	 * http://jqueryui.com
  	 *
  	 * Copyright jQuery Foundation and other contributors
  	 * Released under the MIT license.
  	 * http://jquery.org/license
  	 *
  	 * http://api.jqueryui.com/category/ui-core/
  	 */


  	// $.ui might exist from components with no dependencies, e.g., $.ui.position
  	$.ui = $.ui || {};

  	$.extend($.ui, {
  		version: "1.11.4",

  		keyCode: {
  			BACKSPACE: 8,
  			COMMA: 188,
  			DELETE: 46,
  			DOWN: 40,
  			END: 35,
  			ENTER: 13,
  			ESCAPE: 27,
  			HOME: 36,
  			LEFT: 37,
  			PAGE_DOWN: 34,
  			PAGE_UP: 33,
  			PERIOD: 190,
  			RIGHT: 39,
  			SPACE: 32,
  			TAB: 9,
  			UP: 38
  		}
  	});

  	// plugins
  	$.fn.extend({
  		scrollParent: function(includeHidden) {
  			var position = this.css("position"),
  				excludeStaticParent = position === "absolute",
  				overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/,
  				scrollParent = this.parents().filter(function() {
  					var parent = $(this);
  					if (excludeStaticParent && parent.css("position") === "static") {
  						return false;
  					}
  					return overflowRegex.test(parent.css("overflow") + parent.css("overflow-y") + parent.css("overflow-x"));
  				}).eq(0);

  			return position === "fixed" || !scrollParent.length ? $(this[0].ownerDocument || document) : scrollParent;
  		},

  		uniqueId: (function() {
  			var uuid = 0;

  			return...