2

このコードは、ここにある他の質問の1つで見つかりました。それはまさに私が探しているものです（ドラッグ可能で、最後にクリックされたものに基づいて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++);

    });
});​
4

1 に答える 1

3

電話をかけるだけ.resizable()でサイズが変更可能になります。

$('#box1,#box2,#box3,#box4').draggable({
   start: function(event, ui) { $(this).css("z-index", a++); }
}).resizable();

表示されない理由：jsFiddleでは、jQueryUIはテーマなしで含まれています。ボックスを調べると、次のように、ui-resizableクラスがあり、内部にサイズ変更ハンドルがあることがわかります。

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

、しかし、それらはまったくスタイリングされていません。それらは見えません。それらに寸法を指定すると、それらをドラッグしてボックスのサイズを変更できます。

これが私が話していることを示す簡単なデモです。

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

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

  • .resizable()呼び出しを追加しました

  • このセレクター'#dragZone div'を変更しました。これ'#dragZone > div'により、ハンドラーが混乱せず、ゾーン内のすべてのdivではなく、実際のボックスにのみ適用されます。

于 2012-05-07T09:37:43.823 に答える