Javascript Girl
  1. Javascript Girl
  3. Jquery UI draggable ne redimensionne pas les autres DIV
Intereting Posts
Découvrez si la console Chrome est ouverte JQGrid, comment faire modifier une colonne dans la boîte de dialogue d'ajout, mais pas lors des modifications (en ligne) OpenLayers vs Google Maps? Comment faire un lien pour agir comme entrée de fichier JavaScript pour contrôler l'animation d'image? Comment appeler l'événement onunload de fenêtre pour le bouton iFrame, cliquez sur où la page parent et iFrame réside dans différents domaines Définir un cookie de sous-domaine croisé avec javascript Mémoire Javascript et problèmes de fuite Interceptez XMLHttpRequest et modifiez responseText Est-il normal que les entrées d'images soient omises dans DOM dans document.forms .elements? Problème avec l'affichage de Google Chart dans un onglet de démarrage Dynamiquement incluant jQuery en utilisant JavaScript si ce n'est pas déjà présent Asp.net mvc – comment pouvez-vous parcourir les données du modèle en javascript Native javascript equivalent of jQuery: contient () sélecteur Définir les limites du code postal dans Google Map API

Jquery UI draggable ne redimensionne pas les autres DIV

Dans ce plunk j'ai trois DIV s divisés par deux autres DIV s qui sont draggable (couleur grise). Lorsque les DIV s entraînables sont entraînées vers le haut / vers le bas ou vers la gauche / droite, les autres DIV s doivent être redimensionnés.

Le premier DIV compressible fonctionne bien (celui de gauche qui redimensionne les autres DIV verticalement). Mais le deuxième DIV compressible ne fonctionne pas, bien que la méthode soit identique à la première DIV compressible. Une idée de comment réparer ça?

Javascript 

  var top1H, bottom1H; $( "#div1" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.top; top1H = $("#top1").height(); bottom1H = $("#bottom1").height(); }, drag: function(event,ui) { var shift = ui.position.top; $("#top1").height(top1H + shift - shiftInitial); $("#bottom1").height(bottom1H - shift + shiftInitial); } }); var right1W, left1W; $( "#div2" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.left; right1W = $("#right1").height(); left1W = $("#left1").height(); }, drag: function(event,ui) { var shift = ui.position.left; $("#right1").height(right1W + shift - shiftInitial); $("#left1").height(left1W - shift + shiftInitial); } });

HTML 

 <div> <div id="left1"> <div id="top1"></div> <div id="div1"></div> <div id="bottom1"></div> </div> <div id="div2"></div> <div id="right1"></div> </div>

CSS 

 #div1 { width:180px; height:6px; background-color:#e0e0e0; cursor:ns-resize; position: absolute; } #div2{ width:6px; height:200px; background-color:#e0e0e0; float:left; cursor:ew-resize; } #top1{ width:180px; height:100px; background-color:orange; } #bottom1 { width:180px; height:100px; background-color:blue; } #left1{ width:180px; height:200px; float:left; background-color:orange; } #right1{ height:200px; background-color:red; width:100%; }

Puisque vous avez mentionné que votre premier DIV traction fonctionne bien, je n'ai réglé que le second.

Il y a deux problèmes avec votre code:

  1. Vous avez donné aux deux éléments entraînables l' axis: "y" attribut axis: "y" (alors que le second doit être grad sur l'axe des X
  2. Le changement sur la deuxième traînée devait être sur la largeur (et pas sur la hauteur). 
 $(function() { var top1H, bottom1H; var right1W, left1W; $( "#div1" ).draggable({ axis: "y", start: function(event, ui) { shiftInitial = ui.position.top; top1H = $("#top1").height(); bottom1H = $("#bottom1").height(); }, drag: function(event,ui) { var shift = ui.position.top; $("#top1").height(top1H + shift - shiftInitial); $("#bottom1").height(bottom1H - shift + shiftInitial); } }); $( "#div2" ).draggable({ axis: "x", start: function(event, ui) { shiftInitial = ui.position.left; right1W = $("#right1").width(); left1W = $("#left1").width(); }, drag: function(event,ui) { var shift = ui.position.left; $("#left1 div").width(left1W + shift); } }); }); 
 #div1 { width:180px; height:6px; background-color:#e0e0e0; cursor:ns-resize; position: absolute; } #div2{ width:6px; height:200px; background-color:#e0e0e0; float:left; cursor:ew-resize; left: 180px; } #top1{ width:180px; height:100px; background-color:orange; } #bottom1 { width:180px; height:100px; background-color:blue; } #left1{ width:0; height:200px; float:left; background-color:orange; } #right1{ height:200px; background-color:red; width:100%; } 
 <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> <div> <div id="left1"> <div id="top1"></div> <div id="div1"></div> <div id="bottom1"></div> </div> <div id="div2"></div> <div id="right1"></div> </div>