native mousemove resizer

native mousemove resizer orig.: http://jsfiddle.net/3jMQD/

by Yury

HTML

<p class="resizable">Click to make me resizable<a class="resizer" href="#"></a></p>
<!-- orig. source: http://jsfiddle.net/3jMQD/ -->

CSS

p { background: lime; height: 200px; width: 300px; }
p.resizable { background: cyan; position: relative; }
p .resizer { width: 10px; height: 10px; background: blue; position:absolute; right: 0; bottom: 0; cursor: se-resize; }

JavaScript

var p = document.querySelector('p');

/*p.addEventListener('click', function init() {
console.log(1); 
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);
*/

//p.addEventListener('click', function init() {
//console.log(1); 
//    p.removeEventListener('click', init, false);
//    p.className = p.className + ' resizable';
//    var resizer = document.createElement('div');
//    resizer.className = 'resizer';
//    p.appendChild(resizer);
//    resizer.addEventListener('mousedown', initDrag, false);
//}, false);

var resizer = document.getElementsByClassName('resizer')[0];
    resizer.addEventListener('mousedown', initDrag, false);


var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}