Initial draggableSequence attribute

Gemfile

@@ -12,11 +12,11 @@ gem 'mongoid', '~> 4.0.0', github: 'mongoid/mongoid'
 #Asset stuff
 gem 'sass-rails', github: 'rails/sass-rails'
 gem 'coffee-rails'
+gem 'font-awesome-rails'
 gem 'uglifier'
 gem 'high_voltage', '~> 2.1.0'
 gem 'haml'
 
-gem 'font-awesome-rails'
 
 group :development, :test do
   gem 'pry'

app/assets/javascripts/farmbot_app/directives/sequence-builder/draggablesequence.js.coffee

@@ -0,0 +1,44 @@
+class DraggableSequence
+  constructor: (@$document) ->
+  # template: ''
+  restrict: 'A'
+  scope:
+    some_setting: '='
+  link: (scope, element, attr) =>
+    [startX, startY, x, y] = [0, 0, 0, 0]
+
+    mousemove = (event) ->
+      y = event.pageY - startY
+      x = event.pageX - startX
+      element.css
+        top: y + "px"
+        left: x + "px"
+
+    mouseup = =>
+      @$document.off "mousemove", mousemove
+      @$document.off "mouseup", mouseup
+
+    element.css
+      position: "relative"
+
+    element.on "mousedown", (event) =>
+      event.preventDefault()
+      startX = event.pageX - x
+      startY = event.pageY - y
+      @$document.on "mousemove", mousemove
+      @$document.on "mouseup", mouseup
+
+  controller: [
+      '$scope'
+      '$document'
+      ($scope, $document) ->
+    ]
+    # . . .
+  # compile: (tElement, tAttrs, transclude) ->
+  #   pre: (scope, iElement, iAttrs, controller) -> ...2
+  #   post: (scope, iElement, iAttrs, controller) -> ...
+
+angular.module("FarmBot").directive 'draggablesequence', [
+  '$document'
+  ($document) -> new DraggableSequence($document)
+]

app/views/dashboard/ng-partials/_sequence.html.erb

@@ -12,34 +12,35 @@
       <div class="content-wrapper">
             <div class="row">
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius blue">MOVE ABSOLUTE</i></a>
+                <button draggablesequence class="tiny expand button radius blue">MOVE ABSOLUTE
+                </button>
               </div>
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius green">MOVE RELATIVE</a>
+                <button draggablesequence class="tiny expand button radius green">MOVE RELATIVE</button>
               </div>
               </div>
             <div class="row">
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius yellow">READ PIN</a>
+                <button draggablesequence class="tiny expand button radius yellow">READ PIN</button>
               </div>
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius orange">WRITE PIN</a>
+                <button draggablesequence class="tiny expand button radius orange">WRITE PIN</button>
               </div>
               </div>
             <div class="row">
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius purple">TAKE PICTURE</a>
+                <button draggablesequence class="tiny expand button radius purple">TAKE PICTURE</button>
               </div>
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius pink">IF STATEMENT</a>
+                <button draggablesequence class="tiny expand button radius pink">IF STATEMENT</button>
               </div>
             </div>
              <div class="row">
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius gray">WAITE</a>
+                <button draggablesequence class="tiny expand button radius gray">WAITE</button>
               </div>
               <div class="small-6 large-6 columns">
-                <a href="#" class="tiny expand button radius red">SEND ERROR</a>
+                <button draggablesequence class="tiny expand button radius red">SEND ERROR</button>
               </div>
             </div>
       </div>