2010-11-30 35 views
2

je tente de créer un système de template où un jpg téléchargé est ensuite placé sur un modèle.Est-il possible d'avoir un objet Draggable Jquery sous un autre div

Exemple d'essai:

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

Le problème est que je veux avoir un masque sur la couche la plus supérieure, mais être en mesure de cliquer et faire glisser la couche inférieure. À l'heure actuelle, je dois soit cliquer sur la zone pour l'amener au premier plan, puis faire glisser ou l'avoir transparent à l'avant.

Toutes les idées ou suggestions les bienvenues !!

Répondre

10

Il est en fait un moyen simple: créer le draggable comme d'habitude pour l'élément occlus, et ajouter un gestionnaire d'événements mousedown sur l'image occlusive de déléguer l'événement au draggable:

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

hanks beaucoup, le projet est maintenant terminé mais c'est super à garder à l'esprit, l'autre solution était un PITA à mettre en œuvre! –

+0

Je voulais juste dire que j'ai maintenant mis en œuvre ce sur mon ancienne solution de deux divs. Fonctionne un charme! –

1

Vous utilisez un fichier png transparent pour masquer fané donc je n'est pas possible de faire ce que vous essayez de. Même le png est transparent au milieu mais c'est une partie de l'image et bloque les calques ci-dessous.

Mais vous pouvez couper cette .png en 4 fichiers différents et les placer autour de cette http://jsbin.com/etale4/2/edit

+0

Merci, ce fut quelque chose J'avais pensé, idéalement nous serait tout simplement vouloir utiliser un seul div pour le masque car il y aura différentes versions de téléphones, etc., mais si elle est la seule façon il est toujours mieux que de créer une interface flash. –

2

ont réussi à résoudre en créant une couche sur le sommet avec la position exacte et les dimensions de l'image sur la couche inférieure. Ensuite, faites glisser la couche supérieure et, dans la fonction glisser, mettez à jour la position de la couche d'image.