Makes Addresses in Settings Ordered by Dragging

- Closes #348

Author: jjeffryes

css/obBase.css

@@ -4818,6 +4818,16 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   position: relative;
 }
 
+.addressBoxDragging .addressBox{
+  border-width: 2px;
+  border-style: solid;
+}
+
+.addressBoxGhost .addressBox{
+  border-width: 2px;
+  border-style: dashed;
+}
+
 .buyAddressWrapper {
   padding: 15px;
   overflow: hidden;

js/templates/settings.html

@@ -833,11 +833,10 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Content') %></h3>
               <div class="flexRow">
                 <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %></h3>
               </div>
-              <div class="flexRow pad5 rowTop15">
+              <div class="flexRow pad5 rowTop15 js-sortableAddresses">
                 <% _.each(ob.user.shipping_addresses, function(address, i){ %>
-                <% console.log(address) %>
                 <div class="flexCol-4 pad10 row15">
-                  <div class="addressBox custCol-secondary js-address">
+                  <div class="addressBox custCol-secondary custCol-border-background js-address">
                     <div class="textOpacity1 row40">
                       <div><%= address.name %></div>
                       <div><%= address.street %></div>

js/views/settingsVw.js

@@ -20,7 +20,8 @@ var __ = require('underscore'),
     SMTPConnection = require('smtp-connection'),
     MediumEditor = require('medium-editor'),
     validateMediumEditor = require('../utils/validateMediumEditor'),
-    getBTPrice = require('../utils/getBitcoinPrice');
+    getBTPrice = require('../utils/getBitcoinPrice'),
+    Sortable = require('sortablejs');
 
 module.exports = pageVw.extend({
 
@@ -233,6 +234,7 @@ module.exports = pageVw.extend({
         placeholder_text_single: window.polyglot.t('chosenJS.placeHolderTextSingle'),
         placeholder_text_multiple: window.polyglot.t('chosenJS.placeHolderTextMultiple')
       });
+
       $('#settings-image-cropper').cropit({
         $preview: self.$('.js-settingsAvatarPreview'),
         $fileInput: self.$('#settingsAvatarInput'),
@@ -255,6 +257,7 @@ module.exports = pageVw.extend({
           console.log(errorMessage);
         }
       });
+
       //cache elements used more than once
       self.$moderatorFeeInput = self.$('#moderatorFeeInput');
       self.$moderatorFeeHolder = self.$('.js-settingsModeratorFee');
@@ -286,6 +289,7 @@ module.exports = pageVw.extend({
           console.log(errorMessage);
         }
       });
+
       if (self.model.get('page').profile.header_hash){
         $('#settings-image-cropperBanner').cropit('imageSrc', self.serverUrl +'get_image?hash='+self.model.get('page').profile.header_hash);
         self.newBanner = false;
@@ -304,6 +308,12 @@ module.exports = pageVw.extend({
         }
       });
       editor.subscribe('blur', self.validateDescription);
+
+      self.sortableAddresses && self.sortableAddresses.destroy();
+      self.sortableAddresses = Sortable.create(self.$('.js-sortableAddresses')[0], {
+        chosenClass: "addressBoxDragging",
+        ghostClass: "addressBoxGhost"
+      });
     });
     return this;
   },