javascript - jQuery Resizable Handles 固定位置

Question

如附件中所示 https://jsfiddle.net/0ws7fws0/5/ , 用户可以使用东北和东南位置调整三 Angular 形的大小。

下面是使用的代码

$(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);
  }
});

这里用户可以拉伸(stretch)三 Angular 形，但 handle 位置应该固定，这样即使调整大小也不会改变位置，即 ne 和 se handle 可用于调整大小但 w 句柄应该是固定的(禁用)。我如何实现相同的目标？

Answer 1

解决方案:

What i have done

• 将三 Angular 形分成两部分:下部和上部
• 将固定 handle (比方说别针)保持在同一水平面
• 当 handle ( handle 用于调整大小)和引脚处于同一水平时减小 opp 半径

参见 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'
            });
        }
    });