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

Signaler
Messages postés
121
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 juin 2020
-
Messages postés
121
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 juin 2020
-
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>


3 réponses

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.
Messages postés
121
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 juin 2020
1
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,
Messages postés
28884
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 juillet 2020
2 597
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
Messages postés
121
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
15 juin 2020
1
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 });
  } );