18/01/2011 Development / java script

Trabalhando em cima das resizes das janelas do novo home broker da Xp Investimentos, tive a seguinte idéia:

// JSCRIPT

jQuery(document).ready(function() {
var hr = null;
$("div .drag").live('mousedown', function(e) { hr = { y: e.pageY, p: $(this).parent(), ph: $(this).parent().height() }; e.preventDefault(); });

$(document)
.mousemove(function(e){ if (hr) { hr.p.height(hr.ph + (e.pageY - hr.y)); } e.preventDefault(); })
.mouseup(function(e){ hr = null; e.preventDefault(); /* Poderia chamar algum evento qualquer */ });
});

// HTML

<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>

// ESTILO CSS

div.drag { background-color: #DDD; bottom:0px; position:absolute; width:100%; margin-top:-2px; cursor: n-resize; height: 2px;}
div.full   { border:1px solid red; position: relative; float:left; width: 250px; margin:5px}