0

私はスタックオーバーフローの新参者です。あなたの助けが必要です。オンラインからjquery resize widgetを入手し、ソースを実装しようとしました。1つのウィジェットだけで問題なく動作します。同じページ内の複数のウィジェットに同じサイズ変更機能を配置すると、ウィジェットのサイズ変更中に重なってしまいます。そして、最後のウィジェットのサイズを変更したときのもう1つの情報は、他のウィジェットに影響を与えません(重複しません)。

私のコードCSS

<style>
.widget1
{
    width:150px; min-height:120px; border:1px solid green;
}
.widget2
{
    width:150px; min-height:120px; border:1px solid blue;
}
.widget3
{
    width:150px; min-height:120px; border:1px solid black;
}
</style>

使用されるJS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function() {
        $(".drag_resize").draggable().resizable();
    });
</script>

HTML

<div class="widget1 drag_resize">
 Dummy contents 1
</div>
<div class="widget2 drag_resize">
 Dummy contents 2
</div>
<div class="widget3 drag_resize">
 Dummy contents 3
</div>
4

1 に答える 1

0

こんにちは、stackoverflow へようこそ! ドラッグ可能なコンテナーの z-index 問題が発生しています。同じ問題に関するstackoverflowのこのソリューションを見てください：ドラッグ可能な要素にz-indexを設定する

特に「クリック」機能-あなたの場合、これでうまくいくはずです（テストされていません）：

$('.drag_resize').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

CSS:

.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}

ソリューションを変更して、「クリック」ハンドラーの代わりに jquery ドラッグ可能な独自のイベント ハンドラー (ドラッグ) を使用することもできます: http://jqueryui.com/draggable/#events

乾杯

- - - - - - -編集： - - - - - - -

よりクリーンで簡単なソリューション: ドラッグ可能な要素に z-index を設定する

この実際の例を見てください: http://jsfiddle.net/RhF7t/

于 2013-01-04T12:17:30.847 に答える