diff --git a/gesture2.html b/gesture2.html index e2bfdca..d0ccb9e 100644 --- a/gesture2.html +++ b/gesture2.html @@ -32,6 +32,7 @@ Scale
Rotate
+
:-)
@@ -169,7 +170,8 @@ drag: function () { return ischecked("#dragcheckbox"); }, scale: function () { return ischecked("#scalecheckbox"); }, rotate: function () { return ischecked("#rotatecheckbox"); }, - touchtarget: null + touchtarget: null, + linkItem:$("#drag-button") } ); diff --git a/jquery.gesture2.js b/jquery.gesture2.js index a8b7c83..ef25395 100644 --- a/jquery.gesture2.js +++ b/jquery.gesture2.js @@ -26,10 +26,18 @@ rotate: true, // we can make this jQuery object responds to touch on another jQuery - touchtarget: null + touchtarget: null, + // LinkItem which will move and transform along with this + linkItem: null }, options); + var linkItem = options.linkItem ? $(options.linkItem) : null, + _linkItem = linkItem, + linkItem_original_x = 0, + linkItem_original_y = 0, + linkItem_original_css = ""; + var touchtarget = options.touchtarget ? $(options.touchtarget) : this, _this = this, in_drag = false, @@ -49,12 +57,29 @@ dy = ((event.touches.length == 0) ? event.pageY : event.touches[0].pageY) - original_y, new_css = "translate(" + dx + "px," + dy + "px) " + original_css; _this.__transform__(new_css); + + // Transform LinkItem + if(_linkItem){ + + var linkItem_dx = ((event.touches.length == 0) ? event.pageX : event.touches[0].pageX) - linkItem_original_x, + linkItem_dy = ((event.touches.length == 0) ? event.pageY : event.touches[0].pageY) - linkItem_original_y, + linkItem_new_css = "translate(" + linkItem_dx + "px," + linkItem_dy + "px) " + linkItem_original_css; + _linkItem.__transform__(linkItem_new_css); + } } else { if (in_drag = event.type == "_gesture2_touch_start") { original_x = event.touches[0].pageX; original_y = event.touches[0].pageY; original_css = _this.__transform__(); if (!original_css || original_css == "none") original_css = ""; + + // For linkItem + if(_linkItem){ + linkItem_original_x = event.touches[0].pageX; + linkItem_original_y = event.touches[0].pageY; + linkItem_original_css = _linkItem.__transform__(); + if (!linkItem_original_css || linkItem_original_css == "none") linkItem_original_css = ""; + } } } @@ -76,12 +101,32 @@ "translate(" + (-original_x) + "px," + (-original_y) + "px) " + original_css; _this.__transform__(new_css); + + // Transform LinkItem + if(_linkItem){ + var linkItem_dx = event.pageX - linkItem_original_x, + linkItem_dy = event.pageY - linkItem_original_y, + linkItem_new_css = (__getvalue__(options.drag) ? ("translate(" + event.pageX + "px," + event.pageY + "px) ") : ("translate(" + linkItem_original_x + "px," + linkItem_original_y + "px) ")) + + (__getvalue__(options.scale) ? ("scale(" + event.scale + ")") : "") + + (__getvalue__(options.rotate) ? ("rotate(" + event.rotation + "rad) ") : "") + + "translate(" + (-linkItem_original_x) + "px," + (-linkItem_original_y) + "px) " + + linkItem_original_css; + _linkItem.__transform__(linkItem_new_css); + } } else { in_gesture = true; original_css = _this.__transform__(); original_x = event.pageX; original_y = event.pageY; if (!original_css || original_css == "none") original_css = ""; + + // For LinkItem + if(_linkItem){ + linkItem_original_css = _linkItem.__transform__(); + linkItem_original_x = event.pageX; + linkItem_original_y = event.pageY; + if (!linkItem_original_css || linkItem_original_css == "none") linkItem_original_css = ""; + } } if (event.type == "_gesture2_gesture_end") {