5


ユーザーが要素をドラッグアンドドロップしてHTMLページを作成 できるダッシュボードに取り組んでいます。現在、画像コンポーネントを使用して複数の画像を作成できz-indexます。画像の計算に成功し、上下のキーを使用して調整できます。

問題：
私たちが直面している問題は、画像コンポーネントを選択するときに、ユーザーが簡単にドラッグしてサイズを変更できるように、その上に点線のレイヤーを添付することです。ユーザーが下の画像に示すように画像を配置した場合重複する要素

z-index選択div（青い点のあるもの）のが最高（すべてのコンポーネントに使用する必要がある最高のbcoz）であるため、内側の画像を再度選択することはできません。内側の画像を選択すると選択できなくなりますが、どうすれば対処できますか？参考までに、このサイトでは期待どおりに機能します。
クリックすると親の下に要素が表示されると思いますが、方法はわかりません！イベントを処理するためにjavascript、jqueryを使用しています。

ここに画像の説明を入力してください

4

2 に答える 2

1

JavaScriptまたはjQueryを使用して内側の画像の位置を取得できます。ユーザーが外側の画像をクリックしたときに、マウスの位置が小さい画像の範囲内にあるかどうかを確認します。範囲は、内側の要素の位置、幅、および高さで計算できます。


要素の位置を取得するには：jQuery.offset()またはを使用します.position()（前者はドキュメントに相対的であり、後者は親に相対的です）。

マウスの位置を取得するには：http：//docs.jquery.com/Tutorials：Mouse_Position

于 2013-02-01T02:55:41.033 に答える
0

基になる要素の座標を収集するために、マスキング要素をすばやく非表示にすることを検討できます。完了したら、マスキング要素の可視性を再度有効にすることができます。document.elementFromPoint()マウス座標からDOMアイテムを取得するために使用します。

例：

http://jsfiddle.net/s94cnckm/14/

pointer-events: none;または、マスキング要素のCSSプロパティを使用することもできます。

関連している：

https://developer.mozilla.org/de/docs/Web/CSS/pointer-events

重複する要素の下でクリックを検出する方法は？

于 2015-04-09T14:26:45.590 に答える