Hello,
I am implementing a basic resizeable object which works perfectly (without using scaling).
When I add some scaling to the resizing object then I feel drag resistance when resizing.
The resistance happens when I resize, not when I drag the box, also the object top left moves leftward and does not fully enlarge or shrink following the mouse.
Do you have any idea on how to correct for the scaling factor so that the resize handle nicely follows the mouse?
I think this problem is similar to http://greensock.com/forums/topic/9279-draggable-with-css-scaling/ but I couldn't really figure out the fix.
$(document).ready(function(){
var drag = $("#draggable");
var handle = $("<div class='resize-handle'></div>").appendTo(drag);
TweenLite.set(drag, {scale: 2}); // <<--- this adds resistance <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
TweenLite.set(handle, {top: drag.width(), left: drag.height()});
var dragInst;
dragInst = Draggable.create(drag, {
bounds: "body",
edgeResistance: 0.85
});
var arrowdragInst;
arrowdragInst = Draggable.create(handle, {
type:"top,left",
edgeResistance: 0.85,
onPress: function(e) {
e.stopPropagation(); // cancel drag
/*console.log("$(this.target).position().left = " + $(this.target).offset().left);
console.log("$('body').width() = " + $("body").width());
console.log($("body").width() - $(this.target).offset().left);*/
this.applyBounds({top:100, left:100, width: ($("body").width() - $(this.target).offset().left + (this.x - 60)),
height: ($("body").height() - $(this.target).offset().top) + + (this.y - 60)});
},
onDrag: function(e) {
TweenLite.set(this.target.parentNode, { width: this.x, height: this.y });
}
});
$("body").on("mouseleave", function(e) {
console.log("mouseleave body");
dragInst[0].endDrag(e);
arrowdragInst[0].endDrag(e);
});
});
