Nutanix UI 2.0 Sortable Table with Drag and Drop

index.pug

.canvas
  h3 Sortable Table
  .t-table
    .t-header
      .t-row
        .t-cell.grabber
        .t-cell VM Name
        .t-cell IP
        .t-cell Cluster
        .t-cell Virtual Network
    .t-body
      - var vms = ["testing-1", "testing-2", "testing-3", "testing-4", "testing-5"]
      each vm in vms
        .t-row
          .t-cell.grabber
            svg(viewBox="0 0 6 14")
              g(id="svg-grabber")
                circle(cx="1", cy="1", r="1")
                circle(cx="5", cy="1", r="1")
                circle(cx="1", cy="5", r="1")
                circle(cx="5", cy="5", r="1")
                circle(cx="1", cy="9", r="1")
                circle(cx="5", cy="9", r="1")
                circle(cx="1", cy="13", r="1")
                circle(cx="5", cy="13", r="1")
          .t-cell
            p #{vm}
          .t-cell
            p 10.0.0.0
          .t-cell
            p 10.0.0.0
          .t-cell
            p 10.0.0.0

nutanix-ui-2-0-sortable-table-with-drag-and-drop.markdown

Nutanix UI 2.0 Sortable Table with Drag and Drop

A Pen by Ken Chen on CodePen.

License.

script.js

(function(factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery", "jquery-ui"], factory);
  } else {
    factory(jQuery);
  }
}(function($) {
  var supports = {},
      testProp = function (prefixes) {
        var test_el = document.createElement('div'), i, l;

        for (i = 0; l = prefixes.length, i < l; i++) {
          if (test_el.style[prefixes[i]] != undefined) {
            return prefixes[i];
          }
        }

        return '';
      },
      use_css_animation = false;

  supports['transform'] = testProp([
    'transform', 'WebkitTransform',
    'MozTransform', 'OTransform',
    'msTransform'
  ]);

  supports['transition'] = testProp([
    'transition', 'WebkitTransition',
    'MozTransition', 'OTransition',
    'msTransition'
  ]);

  use_css_animation = supports['transform'] && supports['transition'];

  $.widget("ui.sortable", $.ui.sortable, {
    options: {
      animation: 0,
    },

    _rearrange: function (e, item) {
      var $item,
          props = {},
          reset_props = {},
          offset,
          axis = $.trim(this.options.axis);

      if (!parseInt(this.currentContainer.options.animation) ||
          !axis
      ) {
        return this._superApply(arguments);
      }

      $item = $(item.item[0]);
      
      offset = (this.direction == 'up' ? '' : '-') + ($item[axis == 'x' ? 'width' : 'height']()) + 'px';

      this._superApply(arguments);

      if (use_css_animation) {
        props[supports['transform']] = (axis == 'x' ? 'translateX' : 'translateY') + '(' + offset + ')';
      } else {
        props = {
          position: 'relative',
        };
        props[axis == 'x' ? 'left' : 'top'] = offset;
      }

      $item.css(props);

      if (use_css_animation) {
        props[supports['transition']] = supports['transform'] + ' ' + this.options.animation + 'ms';
        props[supports['transform']] = '';
        reset_props[supports['transform']] = '';
        reset_props[supports['transition']] = '';

        setTimeout(function () {
          $item.css(props);
        }, 0);
      } else {
        reset_props.top = '';
        reset_props.position = '';

        $item.animate({
          top: '',
          position: ''
        }, this.options.animation);
      }

      setTimeout(function () {
        $item.css(reset_props);
      }, this.options.animation);
    }
  });
}));

$(".t-body").sortable({
  items: "> .t-row",
  axis: "y",
  animation: 150
});

scripts

<script src="//use.typekit.net/dck2hdh.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.less

// greyscale
@base-black:          lighten(desaturate(mix(#000, #4183D7, 80%), 40%), 5%);
@black:               #000;
@semi-black:          darken(@base-black, 10%);
@dark-grey-1:         @base-black;
@dark-grey-2:         lighten(@base-black, 10%);
@dark-grey-3:         lighten(@base-black, 20%);
@grey-1:              lighten(@base-black, 30%);
@grey-2:              lighten(@base-black, 40%);
@grey-3:              lighten(@base-black, 50%);
@light-grey-1:        lighten(@base-black, 60%);
@light-grey-2:        lighten(@base-black, 70%);
@light-grey-3:        lighten(@base-black, 80%);
@semi-white:          lighten(@base-black, 81%);
@white:               #fff;

// b
@dark-blue-1:         spin(mix(@blue-1, #000, 70%),12);
@dark-blue-2:         spin(mix(@blue-1, #000, 80%),8);
@dark-blue-3:         spin(mix(@blue-1, #000, 90%),4);
@blue-1:              #22A5F7;
@blue-2:              mix(@blue-1, #fff, 75%);
@blue-3:              mix(@blue-1, #fff, 50%);
@light-blue-1:        mix(@blue-1, #fff, 30%);
@light-blue-2:        mix(@blue-1, #fff, 20%);
@light-blue-3:        mix(@blue-1, #fff, 10%);
@semi-white-blue:     mix(@blue-1, #fff, 5%);

// r
@dark-red-1:          spin(mix(@red-1, #000, 70%),-12);
@dark-red-2:          spin(mix(@red-1, #000, 80%),-8);
@dark-red-3:          spin(mix(@red-1, #000, 90%),-4);
@red-1:               #F55656;
@red-2:               mix(@red-1, #fff, 75%);
@red-3:               mix(@red-1, #fff, 50%);
@light-red-1:         mix(@red-1, #fff, 30%);
@light-red-2:         mix(@red-1, #fff, 20%);
@light-red-3:         mix(@red-1, #fff, 10%);
@semi-white-red:      mix(@red-1, #fff, 5%);

// y
@dark-yellow-1:       spin(mix(@yellow-1, #000, 70%),-12);
@dark-yellow-2:       spin(mix(@yellow-1, #000, 80%),-8);
@dark-yellow-3:       spin(mix(@yellow-1, #000, 90%),-4);
@yellow-1:            #ffbc0b;
@yellow-2:            mix(@yellow-1, #fff, 75%);
@yellow-3:            mix(@yellow-1, #fff, 50%);
@light-yellow-1:      mix(@yellow-1, #fff, 30%);
@light-yellow-2:      mix(@yellow-1, #fff, 20%);
@light-yellow-3:      mix(@yellow-1, #fff, 10%);
@semi-white-yellow:   mix(@yellow-1, #fff, 5%);

// g
@dark-green-1:        spin(mix(@green-1, #000, 70%),12);
@dark-green-2:        spin(mix(@green-1, #000, 80%),8);
@dark-green-3:        spin(mix(@green-1, #000, 90%),4);
@green-1:             #36D068;
@green-2:             mix(@green-1, #fff, 75%);
@green-3:             mix(@green-1, #fff, 50%);
@light-green-1:       mix(@green-1, #fff, 30%);
@light-green-2:       mix(@green-1, #fff, 20%);
@light-green-3:       mix(@green-1, #fff, 10%);
@semi-white-green:    mix(@green-1, #fff, 5%);

// Shadow
@shadow-color-hidden: fade(#000, 0%);
@shadow-color: fade(#000, 2%);
@natural-shadow-hidden: @shadow-color-hidden 0px 1px 1px, @shadow-color-hidden 0px 3px 3px, @shadow-color-hidden 0px 9px 9px;
@natural-shadow: @shadow-color 0px 1px 1px, @shadow-color 0px 3px 3px, @shadow-color 0px 9px 9px;

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

// CSS for Presentation

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding: 60px;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-user-select: none;
}

.canvas {
  // max-width: 100%;
  min-width: 600px;
  margin: 0 auto;
  
  h3 {
    font-size: 14px;
    line-height: 10ppx;
    color: @dark-grey-1;
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  .t-header {
    position: relative;
    
    .t-row {
      display: flex;
      box-shadow: inset 1px 0 0 @light-grey-2, inset -1px 0 0 @light-grey-2, inset 0 -1px 0 @light-grey-3, inset 0 0 0 1px @light-grey-2;
      z-index: 2;
      position: relative;
      border-radius: 4px 4px 0 0;
      
      .t-cell {
        padding: 10px 15px;
        font-size: 12px;
        line-height: 18px;
        color: @grey-1;
        width: 100%;
        box-shadow: inset -1px 0 0 @light-grey-3;
        margin: 1px 0;
        
        &:last-child {
          box-shadow: none;
        }
      }
    }
  }
  
  .t-body {
    position: relative;
    
    .t-row {
      position: relative;
      display: flex;
      box-shadow: inset -1px 0 0 @light-grey-2, inset 1px 0 0 @light-grey-2, inset 0 -1px 0 @light-grey-3, inset 0 1px 0 @light-grey-3;
      margin-top: -1px;
      
      .t-cell {
        margin-left: -1px;
        position: relative;
        
        &:first-child {
          margin-left: 0;
        }
        
        &:hover {
          z-index: 999;
        }
        
        input {
          border: none;
          background: none;
          padding: 9px 15px;
          font-size: 14px;
          line-height: 22px;
          color: @dark-grey-1;
          width: 100%;
          
          &::-webkit-input-placeholder {
            color: @grey-3;
          }
        }
      }
      
      &:last-child {
        box-shadow: inset -1px 0 0 @light-grey-2, inset 1px 0 0 @light-grey-2, inset 0 -1px 0 @light-grey-2, inset 0 1px 0 @light-grey-3;
        border-radius: 0 0 4px 4px;
        
        .t-cell {
          &:first-child {
            border-radius: 0 0 0 4px;
          }
          
          &:last-child {
            border-radius: 0 0 4px 0;
          }
        }
      }
    }
  }
}

.t-table {
  border-radius: 4px;
  background-color: @semi-white;
  box-shadow: inset 0 0 0 1px @light-grey-2;
  
  .t-body {

    .t-row {
      cursor: grab;
      cursor: -webkit-grab;
      background-color: @white;
      transition: box-shadow .3s;

      &.ui-sortable-helper {
        cursor: grabbing;
        cursor: -webkit-grabbing;
        box-shadow: inset -1px 0 0 @light-grey-2, inset 1px 0 0 @light-grey-2, inset 0 -1px 0 @light-grey-2, inset 0 1px 0 @light-grey-2, @natural-shadow;
        
        .t-cell {
          &.grabber {
            svg {
              fill: @grey-1;
            }
          }
        }
      }
      
      .t-cell {
        display: flex;
        align-items: center;
        padding: 9px 15px;
        width: 200px;

        p {
          font-size: 14px;
          line-height: 22px;
          color: @dark-grey-1;
        }
        
        &.grabber {
          width: 6px;
          min-width: 6px;
          padding: 0 0 0 15px;
          box-sizing: border-box;
          flex-basis: 21px;
          flex-shrink: 0;
          
          svg {
            fill: @light-grey-1;
            width: 6px;
            height: 14px;
            transition: all .3s;
          }
        }
      }
    }
  }
  
  .t-header {
    .t-row {
      background-color: @white;
      
      .t-cell {
        width: 200px;
        
        &:first-child {
          box-shadow: none;
        }
        
        &.grabber {
          width: 6px;
          min-width: 6px;
          padding: 0 0 0 15px;
          box-sizing: border-box;
          flex-basis: 21px;
          flex-shrink: 0;
        }
      }
    }
  }
}