Comment ajuster la taille de plusieurs zones de texte adjacentes comme jsfiddle.net?

Comment puis-je régler la taille de la zone de texte en dessinant la souris sur les zones 1, 2 et 3, tout comme le site jsfiddle.net?

Mon code est:

HTML:

<div id="content"> <fieldset id="LeftPanel"> <div id="div_A" class="window top"> A </div> <div id="div_left" class="handler_horizontal"></div> <div id="div_B" class="window bottom"> B </div> </fieldset> <div id="div_vertical" class="handler_vertical"></div> <fieldset id="RightPanel"> <div id="div_C" class="window top"> C </div> <div id="div_right" class="handler_horizontal"></div> <div id="div_D" class="window bottom"> D </div> </fieldset> </div> 

JS:

 $(function () { window.onresize = resize; resize(); }); function resize() { var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)); var divHight = 20 + $("#div_left").height();//20=body padding:10px $("#content").css({ "min-height": h - divHight + "px" }); $("#div_vertical").css({ "height": h - divHight + "px" }); $("#LeftPanel").css({ "height": h - divHight + "px" }); $("#RightPanel").css({ "height": h - divHight + "px", "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px" }); } 

CSS:

 body { background: none repeat scroll 0 0 #EFEFEF; overflow: hidden; position: relative; margin: 0px; padding: 10px; } div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset{ border: 0 none; } #LeftPanel { width: 50%; float: left; } #RightPanel { width: 50%; float: right; } .handler_vertical { cursor: col-resize; width: 8px; float: left; } .handler_horizontal { cursor: row-resize; height: 8px; width: 100%; float: left; } .window { border: 1px solid #ADADAD; width: 100%; float: left; } .top { height: 25%; } .bottom { height: 75%; } 

Vous pouvez également obtenir le code de: http://jsfiddle.net/xBjnY/

Pouvez-vous vérifier cette solution: http://jsfiddle.net/xBjnY/9/

 $(function() { window.onresize = resize; resize(); }); function resize() { var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)); var divHight = 20 + $("#div_left").height(); //20=body padding:10px $("#content").css({ "min-height": h - divHight + "px" }); $("#div_vertical").css({ "height": h - divHight + "px" }); $("#LeftPanel").css({ "height": h - divHight + "px" }); $("#RightPanel").css({ "height": h - divHight + "px", "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px" }); } jQuery.resizable = function(resizerID, vOrH) { jQuery('#' + resizerID).bind("mousedown", function(e) { var start = e.pageY; if (vOrH == 'v') start = e.pageX; jQuery('body').bind("mouseup", function() { jQuery('body').unbind("mousemove"); jQuery('body').unbind("mouseup"); }); jQuery('body').bind("mousemove", function(e) { var end = e.pageY; if (vOrH == 'v') end = e.pageX; if (vOrH == 'h') { jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height() + (end - start)); jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height() - (end - start)); } else { jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width() + (end - start)); jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width() - (end - start)); } start = end; }); }); } jQuery.resizable('div_vertical', "v"); jQuery.resizable('div_right', "h"); jQuery.resizable('div_left', "h"); 

Est-ce ce que vous cherchez? Aide-t-il?

Vous devez écrire un code JavaScript hardcore. 😉 Lors de l'événement mousedown , vous enregistrez la position de la souris et, dans setTimeout (ou setInterval ), vous vérifiez la position actuelle de la souris (par exemple, comme une fois 16 mille secondes pour obtenir ~ 60FPS, il semble bon). Ensuite, vous évaluez la différence entre la position initiale de la souris et la position actuelle de la souris et mettez à jour le css / largeur / hauteur.