1

HTML の別の画像オーバーレイの背後にある画像へのドラッグとサイズ変更を有効にしたいという珍しい状況があります。このように見えます。

ここに画像の説明を入力

背景の画像 (つまり、コーラの瓶) は、jQuery UI を使用してサイズ変更およびドラッグ可能になります。ただし、問題は、オーバーレイされた画像の境界内をクリックするときに画像をドラッグしようとすることにあります。オーバーレイされた画像がドラッグ可能な要素の上にあり、単なる透明であるため、これは明らかに失敗します。

これは、使用されている html と javascript です。

$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable();

<div id="divPhone" style="position: relative;">
    <div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div>
    <div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div>
</div>

誰かがこの問題の回避策を提案できますか? 私が考えることができる唯一の解決策は、クリックイベントが発生したときに画像のインデックスを切り替えることですが、より良い解決策があるはずです.

ここに画像の説明を入力

4

3 に答える 3

1

うーん、これを正しく理解していれば; 少し異なる HTML マークアップを使用し、オーバーフローを変更することで実現できると思います。これにより、階層化された要素の問題が軽減されます。

<div id="phone">
    <!--
    The phone screen, the "white bit" of the phone; the position and dimensions
    of this will need to be changed.
    -->
    <div id="phone_screen" style="overflow: hidden">
        <img id="phone_img" />
    </div>
</div>
  • #phone基本的に電話画面と画像をラップするコンテナーとして機能します。
  • #phone_screen移動およびサイズ変更される画像のコンテナーとして機能します
  • #phone_imgドラッグ可能およびサイズ変更可能に設定されているメイン画像。

この構造では、画像はドラッグ可能でサイズ変更可能である必要があります。#phone_screenユーザーが画像の端に到達してサイズを変更できるようにするには、パディングを追加する価値があります。

于 2013-10-23T14:50:09.760 に答える
1

これは、あなたがやろうとしていることを達成するためのよりJavaScriptスタイルのアプローチです:

http://jsfiddle.net/nL5ew/

基本的に、ラッパーに 3 番目の要素を追加しました。ドラッグしてサイズ変更する画像の非表示ハンドルとして機能する div。次に、ドラッグとサイズ変更のためにjquery uiのイベントを使用して、画像がハンドルの動作を模倣していることを確認します。Resize は alsoResise に便利なオプションを提供し、これを少し簡単にします。

このアプローチを使用すると、「ハンドラー」が一番上にあるため、背景画像のどこでもクリックできます。

HTML:

<div id='workbox'>
    <img src="http://tryimg.com/4/01.png" id="drag-resize-me" />
    <img src="http://tryimg.com/4/phone.png"id="phone"/>
    <div id="handle"></div>
</div>

CSS:

#workbox{
    width: 401px;
    height: 511px;
    position: relative;
    border: 5px #000 solid;
    overflow: hidden;
}
#phone{
    position: absolute;
    top: 0;
    left: 0;
}
#drag-resize-me{
    position: absolute;
    top: 0;
    left: 0;
}
#handle{
    border: 1px #ccc solid;
}

ジャバスクリプト:

$(function(){
    $('#handle').css('height',$('#drag-resize-me').height()).css('width',$('#drag-resize-me').width());
    $("#handle").draggable({
        drag: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
    $("#handle").resizable({
        alsoResize:'#drag-resize-me',
        handles: 'all',
        resize: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
});
于 2013-10-24T02:22:38.603 に答える