Clever Geek Handbook

JQuery Resizable Fixed Position Handles

As you can see from the attached script https://jsfiddle.net/0ws7fws0/5/ , the user can resize the triangle using the northeast and southeast position.

Below code is used

$(document).ready(function() {
  var windowWidth = $("#div1").width();
  var windowHeight = $("#div1").height();


  $(".triangle").css({
    "border-top-width": windowWidth / 2 + 'px '
  });
  $(".triangle").css({
    "transform": "rotate(360deg)"
  });
  $(".triangle").css({
    "border-right": windowWidth + 'px solid lightskyblue'
  });
  $(".triangle").css({
    "border-bottom-width": windowWidth / 2 + 'px '
  });


  $("#div1").draggable({
    containment: ".abcde"
  });
});

$("#div1").resizable({
  handles: "ne,se",
  containment: ".abcde",
  minHeight: 40,
  minWidth: 40
}, {
  start: function(e, ui) {
  },
  resize: function(e, ui) {

    var height = Math.round(ui.size.height);
    var width = Math.round(ui.size.width);

    $(".triangle").css({
      "border-top-width": height / 2 + 'px'

    });
    $(".triangle").css({
      "border-bottom-width": height / 2 + 'px'
    });
    $(".triangle").css({
      "border-right": width + 'px solid lightskyblue'
    });
     $(".triangle").css({
      //"margin-top":  height + 'px'
    });
    $(".triangle").css({
      "transform": "rotate(360deg)"
    });

  },
  stop: function(e, ui) {
    var height = Math.round(ui.size.height);
    var width = Math.round(ui.size.width);
  }
});

enter image description here

Here the user can stretch the triangle, but the position of the handle must be fixed so that the position does not change even if it is resized, i.e. ne

and se

can be used to resize, but the handle w

needs to be fixed (disabled). How can you achieve the same?

+3


source to share


1 answer


Decision:

What I've done

  • Split the triangle into two parts: lower and upper
  • Keep the fixed pen (let them speak) at the same level
  • Decrease opp radius when handle (handle is used to resize) and output at the same level


See https://jsfiddle.net/0ws7fws0/12/

    $(document).ready(function() {
        var windowWidth = $("#div1").width();
        var windowHeight = $("#div1").height();

        $("#div1").draggable({
            containment: ".abcde"
        });
    });

    $("#div1").resizable({
        handles: "ne,se",
        containment: ".abcde",
        minHeight: 40,
        minWidth: 40
    }, {
        start: function(e, ui) {


        },
        resize: function(e, ui) {
            var height = Math.round(ui.size.height);
            var width = Math.round(ui.size.width);
        },
        stop: function(e, ui) {
            var height = Math.round(ui.size.height);
            var width = Math.round(ui.size.width);
            var diff = Math.abs(ui.size.height - ui.originalSize.height);
            var bottomW = parseInt($(".lower-triangle").css("borderBottomWidth"),10);
            var topW = parseInt($(".upper-triangle").css("borderTopWidth"),10);
            if (ui.size.height > ui.originalSize.height) {
                if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                $(".lower-triangle").css({
                    "border-bottom-width": (bottomW + diff) + 'px'
                });
            } else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
                $(".upper-triangle").css({
                    "border-top-width":  (topW + diff) + 'px'
                });
            }
            }
            else { /*when you compress*/
                if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                    if ((bottomW - diff)>0) {
                        $(".lower-triangle").css({
                            "border-bottom-width": (bottomW - diff) + 'px'
                        });
                    }
                    else {
                        $(".lower-triangle").css({
                            "border-bottom-width": '0px'
                        });
                        $(".upper-triangle").css({
                            "border-top-width":  ui.size.height + 'px'
                        });
                    }
            } else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
                if ((topW - diff)>0) {
                    $(".upper-triangle").css({
                        "border-top-width": (topw - diff) + 'px'
                    });
                }
                else {
                    $(".upper-triangle").css({
                        "border-top-width":  '0px'
                    });
                    $(".lower-triangle").css({
                        "border-bottom-width":  ui.size.height + 'px'
                    });
                }
            }
            }


            $(".lower-triangle, .upper-triangle").css({
                "border-right": width + 'px solid lightskyblue'
            });
        }
    });
0


source






More articles:


All Articles