我有一个可调整大小且可拖动的框(灰色)。可以通过从角落拉伸盒子来调整大小。
当前只能通过从角落拉伸来调整盒子的大小。我希望也可以从边缘调整大小。从角落拉伸可使其在宽度和高度上均匀缩放。但是,跨一条边缩放只会沿长度缩放。同时,将其缩放到另一个边缘时,将仅沿宽度缩放。我该如何实现?
我的代码在这里。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;
}
如果要保留长宽比,则无法实现。因此,基本上,当您从中删除该选项时resizable
,您可以根据需要使用角在任意方向上拖动,并在高度和宽度上缩放比例。
$('.resizable').resizable({
//aspectRatio: true, //comment or remove this
handles: 'ne, se, sw, nw'
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句