1

画像のサイズに関係なく、画像の右上隅に画像（私の場合はアイコン）を動的にオーバーレイする方法を誰かに教えてもらえますか？ドラッグ可能なUIを操作できる必要があるため、画像を移動しても、オーバーレイされたアイコンはその位置に留まります。

私はjQueryにかなり慣れておらず、多くのことを試しましたが、実際の例をまとめることができません。最終的に、アイコンはリンク可能である必要があります。これにより、onClick機能をアイコンに割り当てることができます。

誰かが私にいくつかの例を見せたり、正しい方向に私を向けたりできますか？

最新バージョンのjQueryを使用しています。

4

3 に答える 3

1

アイコンを最終的にクリック可能にしたいので、アイコンを:after表示するために包含要素で使用するという私の腸の意図を避けます。代わりに、divドラッグ可能な画像とアイコンの両方を含む単純なラッパーを使用します。

<div class="draggable-image">
  <img src="http://placekitten.com/100/100" />
  <img src="help.png" class="icon" />
</div>

次に、コンテナのスタイルをinline-block設定して、子の幅（およびほとんどの場合は高さ）と一致するようにしimgます。これは、コンテナ内にアイコンを配置する良い機会でもあります。

.draggable-image {
  position: relative;
  display: inline-block;
}
.draggable-image img.icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

これで、ドラッグ可能なイベントをバインドしてui.helper、さまざまなドラッグ可能なメソッドに提供されたオブジェクト内からドラッグ可能な画像を参照できます。

$(".draggable-image").draggable({
  stop: function( event, ui ) {
    alert( $("img:first", ui.helper).attr("src") );
  }
});

:first画像を避けて画像にアクセスしていることに注意してください.icon。最後に、クリックロジックをバインドして、クリックし.iconたユーザーに反応できるようにします。

$(".draggable-image .icon").on("click", function(){
  alert( "You've clicked the icon" );
});

デモ： http： //jsbin.com/ihugas/3/edit

于 2012-05-17T13:47:23.280 に答える
0

それらの両方を「position:relative」div でラップして、div をドラッグ可能にできませんか? 次に、画像の z-index を 1 に、アイコンを 2 に設定して、常に一番上に表示されるようにしますか? 次に、アイコンで「position:absolute; right:0px; top:0px」を使用できます。

これによく似てる

http://jsfiddle.net/qJHuf/1/

しかし、.image div は画像になり、.holder はドラッグ可能になります

于 2012-05-17T13:51:13.013 に答える
0

含まれている div (元の「背景」画像を保持する) の絶対左上にアイコンを配置します。ドラッグ可能を使用して div をドラッグします: http://jqueryui.com/demos/draggable/

于 2012-05-17T13:46:20.753 に答える