2010-11-30 8 views
2

アップロードされたjpgがテンプレートに配置されるテンプレートシステムを作成しようとしています。他のdivの下にJquery Draggableオブジェクトを置くことは可能ですか

試験例:

http://www.silverink.com/TEMP/jqueryTest/

問題は、私は一番上の層の上にマスクを持っていますが、下位レイヤをクリックしてドラッグできるようにしたいということです。現在のところ、領域をクリックして前面に移動させてドラッグするか、前面を透明にする必要があります。

どのようなアイデアや提案が大歓迎です!

答えて

10

簡単な方法は、実際にあります:閉塞された要素のためにいつものようにドラッグを作成し、ドラッグ可能にイベントを委任する閉塞画像にマウスダウンイベントハンドラを追加します。何かだった

$('#occluder').mousedown(function(ev) { 
    $('#draggable').trigger(ev); 
}); 
+0

ハンクスは非常にプロジェクトが終了しましたが、これは覚えておいてよかったです。他の解決策はPITAでした。 –

+0

ちょうど私が2つの部門の私の古い解決策にこれを実装したと言いたいと思っています。作品は魅力! –

1

フェードドマスキングのために透明なpngファイルを使用しているため、あなたがしようとしていることはできません。 PNGでも中間で透明ですが、それは画像の一部であり、下のレイヤーをブロックします。

しかし、あなたは4つの異なるファイルにそのPNG形式をカットし、このhttp://jsbin.com/etale4/2/edit

+0

おかげで、私は思っていた、理想的には、マスクのための単一のdivを使用したいと思うだろうが、携帯電話の様々なバージョンがあるだろうが、それが唯一の方法ならば、それはまだフラッシュインターフェイスを作成するよりも良い。 –

2

の周りにそれらを置くことは、下位層上の画像の正確な位置と大きさで非常に上の層を作成することによって解決するために管理しています。次に、最上位レイヤをドラッグ可能にし、ドラッグ機能で画像レイヤの位置を更新します。

関連する問題