Drag & drop à l'intérieur d'une image

[fortz]

Bonjour à tous,

je suis en train de concevoir la vue générale de mon jeu par navigateur, c'est-à-dire la page où se situe mes batiments et les décors.
Cependant je me heurte à un problème : je dispose d'une image de fond (batiment + décor) qui est plus grande que ma page et je ne veux pas la redimensionner mais simplement faire en sorte que si elle est plus grande que ma fenêtre alors on peut bouger dessus à l'aide de la souris (un système de drag&drop je suppose). Beaucoup de jeux par navigateur ont ce système donc si vous voulez un exemple pour illustrer mes propos je n'aurais pas de mal à vous en fournir.
Donc je ne sais pas comment réaliser cela, je suppose que ça se base sur le mécanisme de drag&drop mais je ne sais pas comment procéder, et je n'arrive pas à trouver des tutos ou sujets sur les forums qui satisfasse mes besoins. J'ai déjà commencer à faire quelque chose :

Code :

<main>
<img src="../design/images/vue_globale/image_decor_main.jpg" alt="fond" id="fond" />
</main>

main {
       width: 100%;
height: 100%;
min-width: 1250px;
overflow: hidden;
}

$('#fond').draggable( {
        containment: 'main',
        cursor: 'move'
});

Cela fonctionne assez bien cependant l'image bouge de façon très bizarre ce n'est PAS DU TOUT fluide et quand je bouge le souris dans genre 3mm ça bouge l'image de haut en bas...

Cordialement, merci pour votre aide !

[@lucard]

Le drag&drop c'est pour "glisser et déposer"
Je pense qu'il faut simplement que tu mettes un scroll pour ton image plus grande que me contenant.

En gros, c'est le système de map. Ou tu glisses la map.

On en a parlé y-a moins de deux mois. A propos d'un soucis sur Firefox (je crois).

[fortz]

justement je commence par ça puis j'attaquerais la map donc je ne sais pas comment faire pour un système de map non plus Sur quel sujet vous en avez parlé exactement ?

Pour vous illustrer mon problème exacte, regarder sur jsfiddle, en enlevant le "containment: "#main"" tout fonctionne à la perfection mais dès que je l'ajoute ça foire ...

Merci

[@lucard]

Sur mobile j'ai pas de drag. Par contre, si je vire la ligne overflow,  ça a l'aire de fonctionner.

Jsais plus pour le topic, utilise le bouton recherche
Sur mobile c'est pas aussi simple que sur PC

[fortz]

oui mais si on vire le overflow, l'image apparait comme tel et je ne veux pas ça, je veux que si elle sort du cadre, elle soit cachée et qu'il faille déplacer l'image pour voir la partie cachée

[Xenos]

Salut,

il faut distinguer deux choses ici: ce que tu veux signifier dans ton site, et la façon dont l'utilisateur va y naviguer.

Ce que tu veux faire ici, ce que tu veux signifier, c'est un scroll. Cela se fait tout naturellement en définissant la taille de ton objet (<img class="my-image".../> + .my-image { with: ...px; height: auto; }) et en laissant faire le navigateur: si l'image déborde, il mettra en place ce qu'il faut pour que l'utilisateur puisse naviguer dans cette image. Certains navigateurs feront une scrollbar (PC principalement), d'autres permettront de naviguer avec la molette (quadridirectionnelle chez certains) ou le bouton central (je l'utilise beaucoup), d'autres feront un style "drag&drop" (terminaux tacticles principalement, ce "drag&drop" vient souvent en complément de la scrollbar).

Là, vu le code fournit, tout problème que tu peux avoir vient de ton propre navigateur.

J'essaierai ceci:

main {

  min-width: 1250px; /* pourquoi? */

  overflow: auto; /* On peut s'en passer: c'est la valeur par défaut */

}

main > img {

  width: 100%;

  height: auto;

}

PS: évite la réponse-type "Ca marche pas"; si cela ne fait pas ce que tu veux, comprends bien l'effet de chaque ligne, au besoin demande, et décrit ce qui ne va pas.
PSS: Le comportement que tu veux ne serait pas simplement celui par défaut du navigateur? C'est à dire celui que tu as si tu vires tout simplement ton CSS?

[fortz]

Ce que je voudrais en fait c'est imiter le comportement des écrans tactiles et donc se déplacer sur l'image avec le mécanisme de "drag&drop" dont tu parle. Je voudrais enlever la barre de scroll et laisser place uniquement au drag&drop.

Avec le css que tu me fournis là, l'image va prendre toute la place qu'elle souhaite et donc le mécanisme de scroll par défaut du navigateur va se mettre en place : logique. De plus, ici, l'image se redimensionne à la taille du main, or au contraire je voudrais que l'image prenne toute la place qu'elle souhaite et que le main (qui lui est de la taille de la fenetre) puisse permettre une navigation dans l'image.

Cordialement, merci pour votre aide.

[Xenos]

A mon avis, c'est une mauvaise idée. Même si Google pose ses miches dans les navigateurs, vouloir faire de même me semble mal venu car tu vas galérer inutilement à gérer les différents terminaux.
Pour que le main se redimensionne, il suffit de supprimer ses width/height, et de ne définir que celles de l'image. De mémoire, le conteneur va alors se redimensionner au contenu.

Pour faire ton drag&drop, si tu y tiens mordicus, vois du coté des plugins jQuery car il est certain qu'il en existe (mais bon, perso, perdre du temps à cherche un tel plugin, à le mettre en place, à l'adapter, à le maintenir, à patcher à droite/à gauche à chaque fois qu'un nouveau terminal sortira, ça me tenterai pas...)

---

Vu que c'est un comportement de navigateur, voilà le plugin firefox adapté: https://addons.mozilla.org/en-US/firefox...-and-drag/

Utilise-le chez toi si tu veux que les scrolls soient des drag & drop. Mets le lien sur ton site si tu estimes que cela peut servir aux gens. Pour le reste, je t'encourage à bien penser séparément ton site à toi (ton coté serveur, où tu diriges tout, c'est à dire toutes les règles du jeu) et la navigation sur ce site (qui devrait être à la préférence de tes joueurs, et non de la tienne)

[niahoo]

Tu peux utiliser Leaflet : https://stackoverflow.com/questions/1311...map-images , http://omarriott.com/aux/leaflet-js-non-...l-imagery/

Ou OpenLayers : http://openlayers.org/en/v3.2.0/examples...image.html mais c'est plus lourd (à vérifier)

[fortz]

C'est peut être en effet pas la meilleure des solutions, mais en effet j'y tiens plutôt pas mal, je trouve que ça donne un aspect graphique interessant au site et un effet de réel (plus réel qu'en scrollant avec la molette je trouve personnellement). Mais merci pour ton conseil. J'ai en effet trouvé quelques plugins jquery et je me suis arrêté sur un qui me donne un résultat très satisfaisant bien qu'il n'intègre pas le zoom (je le ferais peut etre moi-même). Je l'ai testé sur IE et malheureusement le scroll en drag ne fonctionne pas mais le scroll classique dont tu parles prend le relais donc il n'y a aucun problème. Au fait, à ta connaissance, y aurait-il un moyen de pouvoir consulter mon avancement sur mon portable en sachant que je suis ne local ?

Niahoo : merci pour ces liens, je pencherais plus pour Leaflet qui m'a l'air extrêmement complet et qui pourra me servir pour ma map ainsi que pour ma vue générale. L'as-tu déjà utilisé pour un de tes projets ? de jeu peut-être ?

Cordialement, merci pour votre aide