div idsにリサイズ可能

Question

このコードは他の質問の1つにあります。それはまさに私が探しているものです（draggableとdivを積み重ねていますが、最後にクリックされたdivを積み重ねています）。div idをサイズ変更したい場合は除きますが、コードを乱すことなくそれを行う方法を理解できません。

http://jsfiddle.net/LQ4JT/7/

$(document).ready(function() { 
    var a = 3; 
    $('#box1,#box2,#box3,#box4').draggable({ 
     start: function(event, ui) { $(this).css("z-index", a++); } 
    }); 
    $('#dragZone div').click(function() { 
     $(this).addClass('top').removeClass('bottom'); 
     $(this).siblings().removeClass('top').addClass('bottom'); 
     $(this).css("z-index", a++); 

    }); 
});​ 

Answer 1

は単に.resizable()を呼び出すと、彼らはサイズ変更が可能になります。

あなたがそれを見ない理由：jsFiddleでは、jQuery UIはテーマなしで含まれています。あなたは箱を検査する場合は、このように、彼らはui-resizableクラスを持っており、また、それらの内部サイズ変更ハンドルを持っていることを見ることができます：

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div> 

が、それらはすべてでスタイルされていません。彼らは見えない。それらの寸法を与えると、それらをドラッグしてボックスのサイズを変更することができます。

ここには私が話していることを示すsimple demoがあります。

これらは私が変更されたものです：

• が、これはの outh- 電子 ASTハンドラのスタイルを設定します、CSSに.ui-resizable-se { width: 20px; height: 20px; background: cyan; position: absolute; bottom: 0; right: 0; }を追加しました。

• は

• はこのセレクタを変更.resizable()コールを追加しました：それはめちゃくちゃハンドラをせず、唯一、本物のボックスにゾーンでなく、すべてのdiv要素に適用され'#dragZone div''#dragZone > div'に