Javascript jQuery可调整大小的固定位置句柄

如附件中所示，用户可以使用东北和东南位置调整三角形的大小

下面是正在使用的代码

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

在这里，用户可以拉伸三角形，但手柄位置应固定，以便即使调整其大小，也不会改变位置，即

ne

和

se

手柄可用于调整大小，但

w

手柄应固定（禁用）。如何达到同样的效果？

解决方案：

我所做的

• 将三角形分成两部分：下部和上部
• 保持固定手柄（比如销）处于同一水平
• 当手柄（手柄用于调整大小）和销位于同一级别时，减小opp半径

看

---

您是否希望将

w

锁定到框中的特定点？将句柄设置为

ne

和

se

将不会显示其他句柄。听起来像是在问，当

调整大小时，如何以特定的方式变换三角形。您的目标是允许用户创建非等腰三角形吗？嗯，如果您先从
se
重新定位，然后从
ne
重新定位，三角形的形状似乎不正确。另外，如果您从
e
拖动，也会发生同样的情况。我在
stop（）
函数中添加了三角形大小调整代码，因此在您停止大小调整后，它会进行调整，我同意它有时和container div不同步。我想用
ui resizeable ne
缩小三角形并没有任何影响。看到它在工作，但我同意你们的观点，有时它的行为是随机的，发现了一些打破这种状态的方法。
    $(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'
            });
        }
    });