Add drag and drop support

hotoo · Oct 10, 2014 · 0e89cfa · 0e89cfa
1 parent 3e6d6cb
commit 0e89cfa
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 2 deletions.
diff --git a/template/assets/markline/0.5.3/markline-debug.js b/template/assets/markline/0.5.3/markline-debug.js
@@ -319,6 +319,34 @@ define("markline/0.5.3/timeline-debug", ["jquery/2.1.1/jquery-debug"], function(
     this._element.append(['<header>', this.title, '</header>'].join(""));
     this._element.append(head_dates.join(""));
     this._element.append(body_events.join(""));
+    // scroll via mouse drag and drop.
+    var startingMousePostition;
+    var startingPagePosition;
+    this._element.on('mousedown', function(event) {
+      startingMousePostition = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      startingPagePosition = {
+        x: me._element.scrollLeft(),
+        y: me._element.scrollTop()
+      };
+      console.log(startingPagePosition)
+      console.log(startingMousePostition)
+      me._element.on('mousemove', drag);
+    });
+    this._element.on('mouseup', function(event) {
+      me._element.off('mousemove', drag);
+    });
+
+    function drag(event) {
+      event.preventDefault();
+      var x = startingPagePosition.x + (startingMousePostition.x - event.clientX);
+      var y = startingPagePosition.y + (startingMousePostition.y - event.clientY);
+      console.log("D", x, y)
+      me._element.scrollLeft(x);
+      me._element.scrollTop(y);
+    }
   };
   module.exports = Markline;
 });
diff --git a/template/assets/markline/0.5.3/markline.js b/template/assets/markline/0.5.3/markline.js
diff --git a/template/assets/markline/0.5.3/timeline-debug.js b/template/assets/markline/0.5.3/timeline-debug.js
@@ -131,6 +131,34 @@ define("markline/0.5.3/timeline-debug", ["jquery/2.1.1/jquery-debug"], function(
     this._element.append(['<header>', this.title, '</header>'].join(""));
     this._element.append(head_dates.join(""));
     this._element.append(body_events.join(""));
+    // scroll via mouse drag and drop.
+    var startingMousePostition;
+    var startingPagePosition;
+    this._element.on('mousedown', function(event) {
+      startingMousePostition = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      startingPagePosition = {
+        x: me._element.scrollLeft(),
+        y: me._element.scrollTop()
+      };
+      console.log(startingPagePosition)
+      console.log(startingMousePostition)
+      me._element.on('mousemove', drag);
+    });
+    this._element.on('mouseup', function(event) {
+      me._element.off('mousemove', drag);
+    });
+
+    function drag(event) {
+      event.preventDefault();
+      var x = startingPagePosition.x + (startingMousePostition.x - event.clientX);
+      var y = startingPagePosition.y + (startingMousePostition.y - event.clientY);
+      console.log("D", x, y)
+      me._element.scrollLeft(x);
+      me._element.scrollTop(y);
+    }
   };
   module.exports = Markline;
 });
diff --git a/template/assets/markline/0.5.3/timeline.js b/template/assets/markline/0.5.3/timeline.js
diff --git a/timeline.js b/timeline.js
@@ -186,6 +186,38 @@ Markline.prototype.render = function(){
   this._element.append(head_dates.join(""));
   this._element.append(body_events.join(""));
 
+
+  // scroll via mouse drag and drop.
+  var startingMousePostition;
+  var startingPagePosition;
+  this._element.on('mousedown', function(event){
+    startingMousePostition = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    startingPagePosition = {
+      x: me._element.scrollLeft(),
+      y: me._element.scrollTop()
+    };
+
+    console.log(startingPagePosition)
+    console.log(startingMousePostition)
+    me._element.on('mousemove', drag);
+  });
+  this._element.on('mouseup', function(event){
+    me._element.off('mousemove', drag);
+  });
+
+  function drag(event){
+    event.preventDefault();
+    var x = startingPagePosition.x + (startingMousePostition.x - event.clientX);
+    var y = startingPagePosition.y + (startingMousePostition.y - event.clientY);
+    console.log("D", x, y)
+    me._element.scrollLeft(x);
+    me._element.scrollTop(y);
+  }
 };
 
+
+
 module.exports = Markline;