Jquery resizable handles does not working correctly after rotating the div,
i changed the handles after the rotation of div into correct position.,
but when resizing the div it resize opposite direction, for eg we move handle se means the position nw want be fixed but it moves away. Please help me to recover the answer.

Thanks

Member Avatar for LastMitch

Jquery resizable handles does not working correctly after rotating the div, i changed the handles after the rotation of div into correct position., but when resizing the div it resize opposite direction, for eg we move handle se means the position nw want be fixed but it moves away. Please help me to recover the answer.

@mallika_1

Can you post your code because I feel you modify the code.

$('#text_resize').resizable({
            handles: 'ne , se, nw , sw',
            create: function(event, ui) {
                var matrix = $(this).css("-webkit-transform") ||
              $(this).css("-moz-transform")    ||
              $(this).css("-ms-transform")     ||
              $(this).css("-o-transform")      ||
              $(this).css("transform");
              console.log(matrix)
              if(matrix !== 'none') {
                  var values = matrix.split('(')[1].split(')')[0].split(',');
                  var a = values[0];
                  var b = values[1];
                  var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
              } 
              else { 
                  var angle = 0; 
              }
              if(angle < 0) 
                  angle +=360;

                console.log(angle)

                 if((angle >= 0 && angle  < 45 ) || (angle < 361 && angle >= 315))
              {
                  $(this).find('.ui-resizable-sw').css({
                      'bottom':'-10px','left':'-10px','top':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-nw').css({
                      'top':'-10px','left':'-10px','bottom':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-se').css({
                      'bottom':'-10px','right':'-10px','top':'','left':''
                  });
                  $(this).parent().find('.ui-resizable-ne').css({
                      'top':'-10px','right':'-10px','bottom':'','left':''
                  });
              }
              else if(angle >= 45 && angle < 135)
              {
                  $(this).parent().find('.ui-resizable-nw').css({
                      'bottom':'-10px','left':'-10px','top':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-sw').css({
                      'bottom':'-10px','right':'-10px','top':'','left':''
                  });
                  $(this).parent().find('.ui-resizable-ne').css({
                      'top':'-10px','left':'-10px','bottom':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-se').css({
                      'top':'-10px','right':'-10px','left':'','bottom':''
                  });   
              }
              else if(angle >=135 && angle < 225)
              {
                  $(this).parent().find('.ui-resizable-ne').css({
                      'bottom': '-10px','left':'-10px','top':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-nw').css({
                      'bottom': '-10px','right':'-10px','top':'','left':''
                  });
                  $(this).parent().find('.ui-resizable-se').css({
                      'top': '-10px','left':'-10px','bottom':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-sw').css({
                      'top': '-10px','right':'-10px','left':'','bottom':''
                  });               
              }
              else if(angle >=225 && angle < 315)
              {
                  $(this).parent().find('.ui-resizable-se').css({
                      'bottom':'-10px','left':'-10px','top':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-ne').css({
                      'bottom':'-10px','right':'-10px','top':'','left':''
                  });
                  $(this).parent().find('.ui-resizable-sw').css({
                      'top': '-10px','left': '-10px','bottom':'','right':''
                  });
                  $(this).parent().find('.ui-resizable-nw').css({
                      'top':'-10px','right':'-10px','left':'','bottom':''
                  });   

              }
              console.log($(this).offset().left + ' ' + $(this).offset().top)
            },
            start:function(event , ui)
            {
            },
            resize: function(event, ui) {
                    console.log(event.pageX + ' ' + event.pageY)
            },
            stop:function(event ,ui)
            {
                console.log(event.pageX + ' ' + event.pageY)
            }
        })

I got the answer with tiny difference on movement., but working with satify condition.
Change the following functions in jquery resizable plugin

_mouseStart: function(event) {

        var curleft, curtop, cursor,
            o = this.options,
            iniPos = this.element.position(),
            el = this.element;

        this.resizing = true;

        // bugfix for http://dev.jquery.com/ticket/1749
        if ( (/absolute/).test( el.css("position") ) ) {
            el.css({ position: "absolute", top: el.css("top"), left: el.css("left") });
        } else if (el.is(".ui-draggable")) {
            el.css({ position: "absolute", top: iniPos.top, left: iniPos.left });
        }

        this._renderProxy();

        curleft = num(this.helper.css("left"));
        curtop = num(this.helper.css("top"));

        if (o.containment) {
            curleft += $(o.containment).scrollLeft() || 0;
            curtop += $(o.containment).scrollTop() || 0;
        }

        //Store needed variables
        this.offset = this.helper.offset();
        this.position = { left: curleft, top: curtop };
        this.size = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
        this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
        this.originalPosition = { left: curleft, top: curtop };
        this.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };
        this.originalMousePosition = { left: event.pageX, top: event.pageY };
        var angle=0;
        var matrix = $(el).css("-webkit-transform") ||
        $(el).css("-moz-transform")    ||
        $(el).css("-ms-transform")     ||
        $(el).css("-o-transform")      ||
        $(el).css("transform");
        if(matrix !== 'none') {
            var values = matrix.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
        } 
        else { 
            var angle = 0; 
        }
        if(angle < 0) 
            angle +=360;
        this.angle = angle;
        this.rad = this.angle*Math.PI/180;
        //Aspect Ratio
        this.aspectRatio = (typeof o.aspectRatio === "number") ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1);

        cursor = $(el).find(".ui-resizable-" + this.axis).css("cursor");
        $("body").css("cursor", cursor === "auto" ? this.axis + "-resize" : cursor);
        var cornerItem = 0;
        if(this.axis == 'ne')
            cornerItem = 3;
        else if(this.axis == 'nw')
            cornerItem = 2;
        else if(this.axis == 'sw')
            cornerItem = 1;
        else if(this.axis == 'se')
            cornerItem = 0;
        this.cornerItem = cornerItem;
        var t1 = this.position.top;
        var l1 = this.position.left;
        var w1 = this.size.width;
        var h1 = this.size.height;
        var midX = l1 + w1/2;
        var midY = t1 + h1/2;
        var cornersX = [l1-midX, l1+w1-midX , l1+w1-midX, l1-midX];
        var cornersY = [t1-midY, midY-(t1+h1), midY-t1, t1+h1-midY];
        var newX = 1e10;
        var newY = 1e10;
        for (var i=0; i<4; i++) {
            if(i == this.cornerItem){
                this.prevX = cornersX[i]*Math.cos(this.rad) - cornersY[i]*Math.sin(this.rad) + midX;
                this.prevY = cornersX[i]*Math.sin(this.rad) + cornersY[i]*Math.cos(this.rad) + midY;
            }
        }
        el.addClass("ui-resizable-resizing");
        this._propagate("start", event);
        return true;
    },

    _mouseDrag: function(event) {
        //Increase performance, avoid regex
        var data,
        el = this.helper, props = {},
        smp = this.originalMousePosition,
        a = this.axis,
        prevTop = this.position.top,
        prevLeft = this.position.left,
        prevWidth = this.size.width,
        prevHeight = this.size.height;
        dx1 = (event.pageX-smp.left)||0,
        dy1 = (event.pageY-smp.top)||0;
        dx = ((dx1)*Math.cos(this.rad) + (dy1)*Math.sin(this.rad));
        dy =((dx1)*Math.sin(this.rad) - (dy1)*Math.cos(this.rad));
        el = this.element;
        var t1 = this.position.top;
        var l1 = this.position.left;
        var w1 = this.size.width;
        var h1 = this.size.height;
        var midX = l1 + w1/2;
        var midY = t1 + h1/2;
        var cornersX = [l1-midX, l1+w1-midX , l1+w1-midX, l1-midX];
        var cornersY = [t1-midY, midY-(t1+h1), midY-t1, t1+h1-midY];
        var newX = 1e10 , newY = 1e10 , curX =0, curY=0;
        for (var i=0; i<4; i++) {    
            if(i == this.cornerItem){
                newX = cornersX[i]*Math.cos(this.rad) - cornersY[i]*Math.sin(this.rad) + midX;
                newY = cornersX[i]*Math.sin(this.rad) + cornersY[i]*Math.cos(this.rad) + midY;
                curX = newX - this.prevX;
                curY = newY - this.prevY;
            }
        }
        trigger = this._change[a];
        if (!trigger) {
            return false;
        }

        // Calculate the attrs that will be change
        data = trigger.apply(this, [event, dx, dy]);

        // Put this in the mouseDrag handler since the user can start pressing shift while resizing
        this._updateVirtualBoundaries(event.shiftKey);
        if (this._aspectRatio || event.shiftKey) {
            data = this._updateRatio(data, event);
        }

        data = this._respectSize(data, event);

        this._updateCache(data);

        // plugins callbacks need to be called first
        this._propagate("resize", event);

        this.position.left = this.position.left - curX;
        this.position.top  = this.position.top - curY;
        if (this.position.top !== prevTop) {
            props.top = this.position.top + "px";
        }
        if (this.position.left !== prevLeft) {
            props.left = this.position.left + "px";
        }
        if (this.size.width !== prevWidth) {
            props.width = this.size.width + "px";
        }
        if (this.size.height !== prevHeight) {
            props.height = this.size.height + "px";
        }
        el.css(props);

        if (!this._helper && this._proportionallyResizeElements.length) {
            this._proportionallyResize();
        }

        // Call the user callback if the element was resized
        if ( ! $.isEmptyObject(props) ) {
            this._trigger("resize", event, this.ui());
        }


        return false;
    },

    _mouseStop: function(event) {

        this.resizing = false;
        var pr, ista, soffseth, soffsetw, s, left, top,
            o = this.options, that = this;

        if(this._helper) {

            pr = this._proportionallyResizeElements;
            ista = pr.length && (/textarea/i).test(pr[0].nodeName);
            soffseth = ista && $.ui.hasScroll(pr[0], "left") /* TODO - jump height */ ? 0 : that.sizeDiff.height;
            soffsetw = ista ? 0 : that.sizeDiff.width;

            s = { width: (that.helper.width()  - soffsetw), height: (that.helper.height() - soffseth) };
            left = (parseInt(that.element.css("left"), 10) + (that.position.left - that.originalPosition.left)) || null;
            top = (parseInt(that.element.css("top"), 10) + (that.position.top - that.originalPosition.top)) || null;

            if (!o.animate) {
                this.element.css($.extend(s, { top: top, left: left }));
            }

            that.helper.height(that.size.height);
            that.helper.width(that.size.width);

            if (this._helper && !o.animate) {
                this._proportionallyResize();
            }

        }

        $("body").css("cursor", "auto");
        this.element.removeClass("ui-resizable-resizing");

        this._propagate("stop", event);

        if (this._helper) {
            this.helper.remove();
        }
        return false;

    },
    _change: {
        e: function(event, dx, dy) {
            var cs = this.originalSize, sp = this.originalPosition,elwidth, elheight,lleft=0, ttop =0;
            if(this.axis == 'se'){
                elwidth = this.originalSize.width + dx;
                elheight = this.originalSize.height - dy;
                return { height: elheight , width: elwidth };
            }
            else{
                elwidth = this.originalSize.width + dx;
                elheight = this.originalSize.height + dy;
                return { height: elheight , width: elwidth };
            }
        },
        w: function(event, dx, dy) {
            var cs = this.originalSize, sp = this.originalPosition,elwidth, elheight,lleft=0, ttop =0;
            if(this.axis == 'nw'){
                elwidth = cs.width - dx;
                elheight = this.originalSize.height + dy;
                return { height: elheight , width: elwidth };

            }
            else{
                elwidth = cs.width - dx;
                elheight = this.originalSize.height - dy;
                return { height: elheight , width: elwidth };
            }
        },
        n: function(event, dx, dy) {
            var cs = this.originalSize, sp = this.originalPosition,elwidth, elheight,lleft=0, ttop =0;
            if(this.axis == 'nw'){
                elwidth = this.originalSize.width - dx;
                elheight = cs.height + dy;
                return { height: elheight , width: elwidth };
            }
            else{
                elwidth = this.originalSize.width + dx;
                elheight = cs.height + dy;
                return { height: elheight , width: elwidth };
            }               
        },
        s: function(event, dx, dy) {
            var cs = this.originalSize, sp = this.originalPosition,elwidth, elheight,lleft=0, ttop =0;
            if(this.axis == 'se'){
                elwidth = this.originalSize.width + dx;
                elheight = this.originalSize.height - dy;
                return { height: elheight , width: elwidth };
            }
            else {
                elwidth = this.originalSize.width - dx;
                elheight = this.originalSize.height - dy;
                return { height: elheight , width: elwidth };
            }
        },
        se: function(event, dx, dy) {
            return $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
        },
        sw: function(event, dx, dy) {
            return $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
        },
        ne: function(event, dx, dy) {
            return $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
        },
        nw: function(event, dx, dy) {
            return $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
        }
    },
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.