如何使这个可调整大小的div，从边缘调整大小？ [英] How to make this resizable div, resizable from edges?

问题描述

我有一个可调整大小的可拖动框（灰色）。箱子可以通过从角落伸展来调整大小。

目前，箱子只能通过从角落延伸来调整大小。我希望能够从边缘调整它的大小。
从角落伸展使其沿宽度和高度均匀缩放。但是，跨越一个边缘的比例缩放只能沿着长度缩放。而将其缩放到另一边时，只会沿着宽度缩放。
我如何实现这一目标？

我的代码在这里。 http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/

HTML：

 < div id =outer style =background-color：yellow; width：600px; height：400px; margin-left：40px; margin-top：50px;> 
 
 
< div class =draggable_div rot> 
< div class =rotating> 
< div id =innerclass =resizablestyle =background-color：＃3C3C3C; width：300px; height：300px;> 
< / div> 
< / div> 
< / div> 
 
< / div> 
 
< div id =x_and_y_of_inner> Left：，Right：< / div> 
  

JS：

  $（'。draggable_div'）。draggable（）; 
 
 
 $（.draggable_div）.draggable（{
 drag：function（event，ui）{
 
 var left_most_cordinates = $（ ＃）。offset（）。left; 
 var top_most_cordinates = $（＃outer）。offset（）。top; 
 
 $（＃x_and_y_of_inner）。text Left：+ left_most_cordinates +Top：+ top_most_cordinates）; 
 
 ui.position.left = Math.min（left_most_cordinates，ui.position.left）; 
 ui.position。 top = Math.min（top_most_cordinates，ui.position.top）; 
} 
}）; 
 $ b $（'。resizable'）。resizable（{
 aspectRatio：true，
 handles：'ne，se，sw，nw'
}）; 
 
 
 $ b $（document）.on（'mouseover'，'.rot'，function（）{
 var tc = $（this）; 
 tc.rotatable（{
 handle：tc.children（'。rotate.left，.rotate.right'）
}）; 
 return true; 
}）; 
  

CSS：

  .draggable_div 
 {
 position：relative; 
显示：-moz-inline-stack; 
 display：inline-block; 
 vertical-align：top; 
 zoom：1; 
 * display：inline; 
 
光标：手; 
光标：指针; 
} 
 
。可定义的
 {
宽度：50％; 
 border：1px solid＃bb0000; 
} 
 .resizable img 
 {
 width：100％; 
} 
 
 .ui-resizable-handle 
 {
 background：＃f5dc58; 
 border：1px solid #FFF; 
 width：9px; 
 height：9px; 
 
 z-index：2; 
} 
 .ui-resizable-se 
 {
 right：-5px; 
 bottom：-5px; 
} 
 
 .ui-rotating-handle 
 {
 background：＃f5dc58; 
 border：1px solid #FFF; 
 border-radius：5px; 
 -moz-border-radius：5px; 
 -o-border-radius：5px; 
 -webkit-border-radius：5px; 
光标：指针; 
 
 height：10px; 
剩下：50％; 
 margin：0 0 0 -5px; 
位置：绝对; 
 top：-5px; 
 width：10px; 
} 
 .ui-rotating-handle.ui-draggable-dragging 
 {
 visibility：hidden; 
 
  

解决方案

要保留纵横比。所以基本上当你从可调整大小的中移除这个选项时，你可以根据你的需求在任何方向上拖动角，并在高度和宽度上缩放。

  $（'。resizable'）。resizable（{
 // aspectRatio：true，// comment or remove this 
处理：'ne，se，sw，nw'
}）; 
  

DEMO I have a resizable and draggable box (grey in color). The box can be resized by stretching it from its corners.

Currently the box can be resized only by stretching from corners. I want to be able to resize it also from edges. Stretching from corners makes it scale uniformly across width and height. However, scaling across one edge, would scale it along length only. While, scaling it across another edge, would scale it along width only. How do I achieve that?

My code is here. http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/

HTML:

  <div id="outer" style="background-color: yellow; width: 600px; height: 400px; margin-left: 40px; margin-top: 50px;">


        <div class="draggable_div rot">
            <div class="rotatable">
                <div id="inner" class="resizable" style="background-color: #3C3C3C; width: 300px; height: 300px;">
                </div>
            </div>
        </div>

  </div>

  <div id="x_and_y_of_inner">Left: , Right: </div>

JS:

    $('.draggable_div').draggable();


    $( ".draggable_div" ).draggable({
      drag: function( event, ui ) {

        var left_most_cordinates = $("#outer").offset().left;
        var top_most_cordinates = $("#outer").offset().top;

        $("#x_and_y_of_inner").text( "Left: " + left_most_cordinates + " Top: " + top_most_cordinates );

        ui.position.left = Math.min( left_most_cordinates, ui.position.left );
        ui.position.top = Math.min( top_most_cordinates, ui.position.top );
      }
    });

    $('.resizable').resizable({
        aspectRatio: true,
        handles: 'ne, se, sw, nw'
    });



    $(document).on('mouseover', '.rot', function(){
        var tc = $(this);
        tc.rotatable({
            handle:tc.children('.rotate.left, .rotate.right')
        });
        return true;
    });

CSS:

.draggable_div
{
    position: relative; 
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;   

    cursor: hand; 
    cursor: pointer;       
}

.resizable
{
    width: 50%;   
    border: 1px solid #bb0000;   
}
.resizable img
{
    width: 100%;   
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;

    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;

    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
}

解决方案

You cannot achieve this if you want to preserve the aspect ratio. So basically when you remove that option from the resizable, you can use the corners to drag on any direction as per your requirement and scale it across height and width.

$('.resizable').resizable({
    //aspectRatio: true, //comment or remove this
    handles: 'ne, se, sw, nw'
});

DEMO

这篇关于如何使这个可调整大小的div，从边缘调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！