feat(sortable): add workaround for horizontal lists

Author: thgreasi

src/sortable.js

@@ -28,12 +28,22 @@ angular.module('ui.sortable', [])
             return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed());
           }
 
+          // thanks jquery-ui
+          function isFloating (item) {
+            return (/left|right/).test(item.css('float')) || (/inline|table-cell/).test(item.css('display'));
+          }
+
           function afterStop(e, ui) {
             ui.item.sortable._destroy();
           }
 
           var opts = {};
 
+          // directive specific options
+          var directiveOpts = {
+            'ui-floating': undefined
+          };
+
           var callbacks = {
             receive: null,
             remove:null,
@@ -46,7 +56,7 @@ angular.module('ui.sortable', [])
             helper: null
           };
 
-          angular.extend(opts, uiSortableConfig, scope.$eval(attrs.uiSortable));
+          angular.extend(opts, directiveOpts, uiSortableConfig, scope.$eval(attrs.uiSortable));
 
           if (!angular.element.fn || !angular.element.fn.jquery) {
             $log.error('ui.sortable: jQuery should be included before AngularJS!');
@@ -69,6 +79,13 @@ angular.module('ui.sortable', [])
             });
 
             callbacks.start = function(e, ui) {
+              if (opts['ui-floating'] === 'auto') {
+                // since the drag has started, the element will be
+                // absolutely positioned, so we check its siblings
+                var siblings = ui.item.siblings();
+                angular.element(e.target).data('ui-sortable').floating = isFloating(siblings);
+              }
+
               // Save the starting position of dragged item
               ui.item.sortable = {
                 index: ui.item.index(),
@@ -240,7 +257,18 @@ angular.module('ui.sortable', [])
               // is still bound to the directive's element
               if (!!element.data('ui-sortable')) {
                 angular.forEach(newVal, function(value, key) {
-                  if(callbacks[key]) {
+                  // if it's a custom option of the directive,
+                  // handle it approprietly
+                  if (key in directiveOpts) {
+                    if (key === 'ui-floating' && (value === false || value === true)) {
+                      element.data('ui-sortable').floating = value;
+                    }
+
+                    opts[key] = value;
+                    return;
+                  }
+
+                  if (callbacks[key]) {
                     if( key === 'stop' ){
                       // call apply after stop
                       value = combineCallbacks(