Assurez - <div> redimensionnables

Est-il un moyen de faire un <div> container redimensionnables avec drag'n'drop? De sorte que l'utilisateur peut changer la taille de celui-ci à l'aide d'un glisser-déposer?

Toute aide serait vraiment appréciée!

InformationsquelleAutor Chris | 2008-12-24
  1. 41

    La meilleure méthode serait d'utiliser CSS3. Soutenu par au moins Webkit et Gecko.

    Selon la spec w3c:

    div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

    Webkit et Firefox ne sont pas interpréter les spécifications de la même façon. Dans Webkit la taille est limitée à la largeur et la hauteur de l'ensemble. Il y a une autre question: Comment puis-je utiliser les CSS d'un élément est redimensionnable à une dimension plus petite que la première? à ce sujet.

    • Pris en charge sur Gecko (testé sur mon Firefox 14)
    • Toutefois, cela ne vous permettra pas de redimensionner inférieur à l'ensemble de la largeur et de la hauteur de la div.
    • Juste testé et au moins dans firefox 26 ce n'est pas vrai. Avez-vous mis un min-width ou la hauteur peut-être?
    • Juste essayé sous firefox et ça fonctionne, mais dans chrome (version 31) n'est pas réduit au-delà de l'ensemble de la largeur/hauteur. Aucun procès-verbal d'une largeur de définir.
    • que ne vous permet de redimensionner à partir d'un angle droit?
    • Dépend du navigateur que je crois.
    • il est possible, comme ci-dessous. .redimensionnable-content { min-height: 30px; min-width: 30px; resize: à la fois; overflow: auto; max-height: ajustement du contenu; max-width: fit-contenu; }
    • Que redimensionner "grabber", dans le coin inférieur droit, est de façon à petit dans Chrome 69 sur un moniteur 4K et son style n'est pas accessible via CSS; vous ne pouvez pas mettre à l'échelle plus grande (au moment d'écrire ces lignes).

    InformationsquelleAutor Georg Schölly
  2. 3
    .resizable-content {
    min-height: 30px;
    min-width: 30px;
    resize: both;
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}
    • Il y a déjà une réponse faisant usage de css3 "redimensionner". Ceci mis à part, pouvez-vous s'il vous plaît ajouter un peu difficile à expliquer par des mots.
    • Je voulais juste montrer comment il est possible de redimensionner inférieur à l'ensemble de la largeur et de la hauteur de la div .depuis quelqu'un au-dessus dit qu'il ne l'est pas!
    InformationsquelleAutor sushmitha shenoy
  3. 0

    si vous avez besoin d'exécuter une fonction doOnResize(tag) pour chaque balise (également le <div>) entre le tableau de mustberesizeable tags, vous pourriez simple copie de ce tableau à fenêtre's:

    window[WIN_RESIZED] = [] //init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

    et après cet ensemble de

    window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

    où somewehere dans le début doit être écrit

    const WIN_RESIZED = 'move_resized_divs'

    avec le nom arbitraire comme " move_resized_divs'

    InformationsquelleAutor Leon Rom