web-dev-qa-db-fra.com

Rendre <div> redimensionnable

Est-il possible de redimensionner un conteneur <div> avec drag'n'drop? Pour que l'utilisateur puisse en changer la taille en utilisant drag'n'drop?

Toute aide serait vraiment appréciée!

htmldrag-and-dropresize
27
Chris

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

Selon la spécification w3c :

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

Webkit et Firefox n'interprètent pas les spécifications de la même manière. Dans Webkit, la taille est limitée à la largeur et à la hauteur définies. Il y a une autre question: Comment puis-je utiliser CSS pour rendre un élément redimensionnable en une dimension plus petite que celle d'origine? à ce sujet.

41
Georg Schölly
.resizable-content {
    min-height: 30px;
    min-width: 30px;
    resize: both;
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}
2
sushmitha shenoy

si vous avez besoin d'exécuter une fonction doOnResize (tag) pour chaque tag (également le <div>) du tableau de mustberesizeable tags , vous pourriez copier simplement ce tableau dans window 's'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

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

où quelque part au début doit être écrit

const WIN_RESIZED = 'move_resized_divs'

avec un nom arbitraire comme ' move_resized_divs '

0
Leon Rom