Menu

Empêcher les flottants de dépasser de leur conteneur [Résolu]

Messages postés
63
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 mai 2019
- - Dernière réponse : rasielblas
Messages postés
63
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 mai 2019
- 15 mai 2019 à 17:27
Bonjour,



Bonjour, j'ai un div flotant et draggable, et j'aimerais qu'elle ne dépasse pas du container lorsqu'on le déplace, est je sais que pour l'empêcher de déborder en utilise la propriété overflow:hidden, mais le problème c'est que j'ai besoin de scroll vertical et j'aimerais savoir s'il y a d'autre moyen d'empêcher le div flotant de déborder du conteneur sans utilisé overflow: hidden avec jquery ou css ou javascript. Voici mon code:

<div id="mainContainer" >
<div class="monDiv draggable">
    div flotant
</div>
<div>


Afficher la suite 

Votre réponse

3 réponses

0
Merci
Bonjour, je vois pas le rapport entre la barre de défilement et le drag and drop.
D'ailleurs il est où le drag an drop? C'est au moment du déplacement que vous devez définir que celui ci doit se faire dans le container.

'je sais que pour l'empêcher de déborder en utilise la propriété overflow:hidden'
ah bon pour moi ça sert à indiquer ou non la/les barre de défilement)et en automatique(par défaut) l'affiche ou pas en fonction de la place prise par le contenu:
https://www.w3schools.com/cssref/pr_pos_overflow.asp

Ceci peut vous aider, ou alors faire soi-même tout le script du dragAndDrop:
https://developer.mozilla.org/fr/docs/Web/API/API_HTML_Drag_and_Drop/Op%C3%A9rations_de_glissement
Il me sembles qu'il y a un moyen d'indiquer une zone de destination facilement(une fois l'élément commence à glisser) mais je ne retrouve plus d'exemple.
Commenter la réponse de erman
Messages postés
63
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 mai 2019
0
Merci
Merci de m'avoir répondu, et merci pour votre lien mais j'ai lu son contenu est c'est assez complexe avec javascript pur pour moi, en fait le drag and drop n'est pas vraiment ce que je veux résoudre, je souhaite juste avoir quelque chose qui est équivalence à overflow:hidden car je ne peux pas l'utiliser car j'ai encore besoin de overflow-y est je ne veux pas le touché mais je cherche autre chose qui pourrait remplir la même fonction que overflow:hidden.

Cordialement,
Commenter la réponse de rasielblas
Messages postés
25565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977
0
Merci
Bonjour,

Comme te l'a indiqué eman, nous ne voyons pas le rapport entre la propriété overflow (qui permet juste de définir si on affiche ou non les barres de défilement sur l'élément... ) et le fait que l'élément soit draggable en dehors ou non du container....

Je suppose que tu utilises le draggable de jqueryui ...
Et dans la documentation.. tu as tout ce qu'il te faut...
regarde : https://jqueryui.com/draggable/#constrain-movement


Si ta question, pas très claire au passage, concerne les "dimensions" du container ou l'affichage ou non des barres de défilement (cette question concerne alors le CSS et non le javasript ! )... il faut que tu utilises (en css) le max-width et le max-height si tu veux fixer les dimensions maximums.
Si tu veux masquer la barre de défilement uniquement en x mais conserver celui en y , tu peux utiliser le overflow-x:hidden
rasielblas
Messages postés
63
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 mai 2019
-
Merci ton lien magique viens de me dévoiler mon souhaite, ça marche bien avec le code:

<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm contained within the box</p>
  </div>
</div>


  $( function() {
    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
  } );
Commenter la réponse de jordane45