Re-organised {{movable}} render modifier code

no issue

- moved lifecycle hooks to top of file as they are framework-provided and control creation/destruction
- changed code order for `dragStart()`, `drag()`, `dragEnd()` so they follow the modifiers expected event cycle

ghost/admin/app/modifiers/movable.js

@@ -12,6 +12,19 @@ export default class MovableModifier extends Modifier {
     xOffset = 0;
     yOffset = 0;
 
+    // Lifecycle hooks ---------------------------------------------------------
+
+    didReceiveArguments() {
+        this.removeEventListeners();
+        this.addStartEventListeners();
+    }
+
+    willDestroy() {
+        this.removeEventListeners();
+    }
+
+    // Custom methods -----------------------------------------------------------
+
     addStartEventListeners() {
         this.element.addEventListener('touchstart', this.dragStart, false);
         this.element.addEventListener('mousedown', this.dragStart, false);
@@ -41,15 +54,6 @@ export default class MovableModifier extends Modifier {
         this.removeActiveEventListeners();
     }
 
-    didReceiveArguments() {
-        this.removeEventListeners();
-        this.addStartEventListeners();
-    }
-
-    willDestroy() {
-        this.removeEventListeners();
-    }
-
     @action
     dragStart(e) {
         if (e.type === 'touchstart' || e.button === 0) {
@@ -74,25 +78,6 @@ export default class MovableModifier extends Modifier {
         }
     }
 
-    @action
-    dragEnd(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        this.active = false;
-
-        this.initialX = this.currentX;
-        this.initialY = this.currentY;
-
-        this.removeActiveEventListeners();
-        this.enableScroll();
-
-        // timeout required so immediate events blocked until the dragEnd has fully realised
-        setTimeout(() => {
-            this.enablePointerEvents();
-        }, 5);
-    }
-
     @action
     drag(e) {
         e.preventDefault();
@@ -128,6 +113,25 @@ export default class MovableModifier extends Modifier {
         }
     }
 
+    @action
+    dragEnd(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.active = false;
+
+        this.initialX = this.currentX;
+        this.initialY = this.currentY;
+
+        this.removeActiveEventListeners();
+        this.enableScroll();
+
+        // timeout required so immediate events blocked until the dragEnd has fully realised
+        setTimeout(() => {
+            this.enablePointerEvents();
+        }, 5);
+    }
+
     @action
     cancelClick(e) {
         e.preventDefault();