2012-05-07 15 views
2

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

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++); 

    }); 
});​ 
+0

試したコードでjsfiddleを追加できますか?だから私たちはそれがどのように混乱するか見ることができますか? – Bazzz

答えて

3

は単に.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'

+0

素晴らしい、ありがとう。現在別の質問で迷惑をかねて申し訳ありませんが、作成したシアンハンドルをデフォルトのサイズ変更可能ハンドルにするにはどうすればよいですか? – user1379378

+0

@ user1379378テーマを追加するだけです。あるいは、[manual page](http://jqueryui.com/demos/resizable/)にアクセスして、必要なCSSと画像を検査/コピーすることもできます。 – kapa

関連する問題