Ist es möglich, ein Jquery Draggable-Objekt unter einem anderen div zu haben

Question

Ich versuche ein Template-System zu erstellen, wo ein hochgeladenes jpg dann auf einer Vorlage platziert wird.

Testbeispiel:

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

Das Problem ist, dass ich eine Maske auf der obersten Schicht haben will, aber die Lage sein, die untere Schicht zu klicken und ziehen. Gegenwärtig muss ich entweder auf den Bereich klicken, um ihn in den Vordergrund zu bringen, dann ziehe ich ihn oder lasse ihn im Vordergrund transparent erscheinen.

Alle Ideen oder Vorschläge sind sehr willkommen!

Answer 1

Es ist eigentlich eine einfache Möglichkeit: die ziehbar wie üblich für das verstopfte Element erstellen, und fügen Sie Bild einen mousedown- Event-Handler auf dem verdeck das Ereignis an den ziehbar zu delegieren:

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

Answer 2

Sie verwenden eine transparente PNG-Datei für verblasste Maskierung, so dass es nicht möglich ist, das zu tun, was Sie versuchen. Sogar Png ist in der Mitte transparent, trotzdem ist es ein Teil des Bildes und blockiert die darunter liegenden Schichten.

Sie können aber, dass png in 4 verschiedene Dateien schneiden und legen sie diese um http://jsbin.com/etale4/2/edit

Answer 3

Wurden durch die Schaffung einer Schicht auf der obersten Etage mit der genauen Position und Abmessungen des Bildes auf der unteren Schicht zu lösen geführt. Erstellen Sie dann die oberste Ebene ziehbar und aktualisieren Sie die Position der Bildebene in der Ziehfunktion.