我有一个可以调整大小和拖动的方框(灰色)。这个方框目前只能通过拉伸角落来进行调整大小。我想从边缘也能调整它的大小。从角落拉伸会让它在宽度和高度上均匀缩放。然而,沿着一条边缩放将仅沿着长度缩放。在另一边缩放它将仅沿着宽度缩放。我该如何实现这一点?
我的代码在这里。http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/ HTML:
我的代码在这里。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;
}
cursor
并处理它们。请查看此**2个边缘 - 右侧和顶部的演示
**。 - Guruprasad J Rao