mephraim · tantalor · Apr 1, 2010 · Apr 9, 2010 · Apr 9, 2010 · Apr 9, 2010
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,6 @@
+[submodule "vendor/screw-unit"]
+	path = vendor/screw-unit
+	url = git://github.com/nkallen/screw-unit.git
+[submodule "vendor/raphael"]
+	path = vendor/raphael
+	url = git://github.com/DmitryBaranovskiy/raphael.git
diff --git a/demo/demo.html b/demo/demo.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
-    <script src="../vendor/raphael.js" type="text/javascript"></script>
+    <script src="../vendor/raphael/raphael.js" type="text/javascript"></script>
     <script src="../lib/raphael.draggable.js" type="text/javascript"></script>
     <script src="demo.js" type="text/javascript"></script>
 </head>

diff --git a/lib/raphael.draggable.js b/lib/raphael.draggable.js
@@ -103,6 +103,15 @@
     disable: function() {
       this.enabled = false;
       return this.element;
+    },
+
+    dragged: function (cb) {
+      this.element.translate = (function (el, fn) {
+        return function (x, y) {
+          fn.call(el, x, y);
+          cb.call(el, x, y);
+        }
+      })(this.element, this.element.translate);
     }
   };
 
@@ -120,7 +129,8 @@
       if (paper.draggable.current() || !element.draggable.enabled)
         return;
 
-      paper.draggable.current(element.draggable.parent || element);
+      paper.draggable.current(element.draggable.parent && element.draggable.parent.draggable.enabled
+        ? element.draggable.parent : element);
       lastDragX = event.clientX;
       lastDragY = event.clientY;
 

diff --git a/spec/raphael.draggable_spec.js b/spec/raphael.draggable_spec.js
@@ -110,6 +110,50 @@ Screw.Unit(function() {
         expect(rect.draggable.disable()).to(equal, rect);
       });
     });
+
+    describe("the draggable.dragged function for elements", function () {
+      it("calls the event listener with the elements translation", function() {
+        var draggedX, draggedY;
+        rect.draggable.dragged(function (x, y)
+        {
+          draggedX = x;
+          draggedY = y;
+        });
+
+        var startX = startY = 0;
+        var moveX = moveY = 15;
+
+        rect.mousedown([{ clientX: startX, clientY: startY}]);
+        document.onmousemove({clientX: moveX, clientY: moveY});
+
+        expect(draggedX).to(equal, moveX - startX);
+        expect(draggedY).to(equal, moveY - startY);
+      });
+
+      it("correctly translates the element", function() {
+        var translateX, translateY;
+        Raphael.el.translate = function(x, y) {
+          translateX = x;
+          translateY = y;
+        };
+
+        var dragged;
+        rect.draggable.dragged(function (x, y) {
+          dragged = true;
+        });
+
+        var startX = startY = 0;
+        var moveX = moveY = 15;
+
+        rect.mousedown([{ clientX: startX, clientY: startY}]);
+        document.onmousemove({clientX: moveX, clientY: moveY});
+
+        expect(translateX).to(equal, moveX - startX);
+        expect(translateY).to(equal, moveY - startY);
+
+        expect(dragged).to(equal, true);
+      });
+    });
 
     describe("event handlers", function() {
       describe("mousedown", function() {
@@ -189,8 +233,74 @@ Screw.Unit(function() {
       it("returns the set after being called", function() {
         expect(set.draggable.disable()).to(equal, set);
       });
+
+      it("moves the element instead of moving the set during dragging", function() {
+        var translated = false;
+        set.translate = function (x, y) {
+          translated = true;
+        };
+
+        var rect = paper.rect(0,0,10,10);
+        set.push(rect);
+
+        set.draggable.disable();
+
+        rect.mousedown([{ clientX: 0, clientY: 0}]);
+        document.onmousemove({clientX: 1, clientY: 1});
+
+        expect(translated).to(equal, false);
+      });
     });
 
+    describe("the draggable.dragged function for sets", function () {
+      it("calls the event listener with the set's translation", function() {
+        var draggedX, draggedY;
+        set.draggable.dragged(function(x, y) {
+          draggedX = x;
+          draggedY = y;
+        });
+
+        var startX = startY = 0;
+        var moveX = moveY   = 15;
+
+        var rect = paper.rect(0,0,10,10);
+        set.push(rect);
+
+        rect.mousedown([{ clientX: startX, clientY: startY}]);
+        document.onmousemove({clientX: moveX, clientY: moveY});
+
+        expect(draggedX).to(equal, moveX - startX);
+        expect(draggedY).to(equal, moveY - startY);
+       });
+
+      it("correctly translates the set", function() {
+        var translateX, translateY;
+        set.translate = function(x, y) {
+          translateX = x;
+          translateY = y;
+        };
+
+        var dragged;
+        set.draggable.dragged(function (x, y) {
+          dragged = true;
+        });
+
+        var startX = startY = 0;
+        var moveX = moveY   = 15;
+
+        var rect = paper.rect(0,0,10,10);
+        set.push(rect);
+
+        rect.mousedown([{ clientX: startX, clientY: startY}]);
+        document.onmousemove({clientX: moveX, clientY: moveY});
+
+        expect(translateX).to(equal, moveX - startX);
+        expect(translateY).to(equal, moveY - startY);
+
+        expect(dragged).to(equal, true);
+      });
+    });
+
     describe("set.push function", function() {
       it("adds a draggable.parent property to the element that stores the parent set", function() {
         var rect = paper.rect(1,1,1,1).draggable.enable();

diff --git a/spec/suite.html b/spec/suite.html
@@ -1,20 +1,24 @@
 <html>
   <head>
-    <script src="../vendor/screw.unit/jquery-1.3.2.min.js"></script>
-    <script src="../vendor/screw.unit/jquery.fn.js"></script>
-    <script src="../vendor/screw.unit/jquery.print.js"></script>
+    <script src="../vendor/screw-unit/lib/jquery-1.2.6.js"></script>
+    <script src="../vendor/screw-unit/lib/jquery.fn.js"></script>
+    <script src="../vendor/screw-unit/lib/jquery.print.js"></script>
 
-    <script src="../vendor/screw.unit/screw.builder.js"></script>
-    <script src="../vendor/screw.unit/screw.matchers.js"></script>
-    <script src="../vendor/screw.unit/screw.events.js"></script>
-    <script src="../vendor/screw.unit/screw.behaviors.js"></script>
+    <script src="../vendor/screw-unit/lib/screw.builder.js"></script>
+    <script src="../vendor/screw-unit/lib/screw.matchers.js"></script>
+    <script src="../vendor/screw-unit/lib/screw.events.js"></script>
+    <script src="../vendor/screw-unit/lib/screw.behaviors.js"></script>
 
-    <script src="../vendor/raphael.js"></script>
+    <script src="../vendor/raphael/raphael.js"></script>
     <script src="../lib/raphael.draggable.js"></script>
     <script src="raphael.draggable_spec.js"></script>
     <script src="spec_helper.js"></script>
 
-    <link rel="stylesheet" href="../vendor/screw.unit/screw.css">
+    <link rel="stylesheet" href="../vendor/screw-unit/lib/screw.css">
+
+    <style type="text/css" media="screen">
+      svg { display: none; }
+    </style>
   </head>
   <body>
 

diff --git a/vendor/raphael b/vendor/raphael
diff --git a/vendor/raphael.js b/vendor/raphael.js
diff --git a/vendor/screw-unit b/vendor/screw-unit
diff --git a/vendor/screw.unit/jquery-1.3.2.min.js b/vendor/screw.unit/jquery-1.3.2.min.js
diff --git a/vendor/screw.unit/jquery.fn.js b/vendor/screw.unit/jquery.fn.js
diff --git a/vendor/screw.unit/jquery.print.js b/vendor/screw.unit/jquery.print.js
diff --git a/vendor/screw.unit/screw.behaviors.js b/vendor/screw.unit/screw.behaviors.js