# Javascript drag&drop expand/contract of textarea

**URL:** <https://boards.straightdope.com/t/javascript-drag-drop-expand-contract-of-textarea/345848>\
**Category:** Factual Questions\
**Created:** [February 23, 2006, 9:12pm UTC](https://boards.straightdope.com/t/javascript-drag-drop-expand-contract-of-textarea/345848 "2006-02-23T21:12:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Improv\_Geek](https://avatars.discourse-cdn.com/v4/letter/i/b3f665/32.png) [@Improv\_Geek](https://boards.straightdope.com/u/Improv_Geek)\
**Post date:** [February 23, 2006, 9:12pm UTC](https://boards.straightdope.com/t/javascript-drag-drop-expand-contract-of-textarea/345848/1 "2006-02-23T21:12:31Z")

</div>

I’ve seen it as a Greasemonkey script and I know I’ve seen it on sites, but I can’t find an example of it now. I’ve tried to take the greasemonkey script but I can’t get it to work as a site script. Anyone have a site with an example of this? Or know where I can find it?

---

<div class="post-metadata">

**Author:** ![Omphaloskeptic](https://avatars.discourse-cdn.com/v4/letter/o/bcef8e/32.png) [@Omphaloskeptic](https://boards.straightdope.com/u/Omphaloskeptic)\
**Post date:** [February 24, 2006, 1:27am UTC](https://boards.straightdope.com/t/javascript-drag-drop-expand-contract-of-textarea/345848/2 "2006-02-24T01:27:02Z")

</div>

This works for me under Mozilla. I don’t currently have a working IE version to test on, but it’s probably not too hard to make it work under IE too.

```auto

<html>
<head><title>Resizable text-box</title>
<style type="text/css">
.draggable {
  background-color: #888;
  text-align: center;
}
</style>
</head>
<script>
var ta;
var x_c, y_r;
var r, c;
var isactive = 0;
var x0, y0;
function init() {
  ta = document.getElementById("TA");
  c = ta.cols;
  r = ta.rows;
  x_c = ta.offsetWidth / c;
  y_r = ta.offsetHeight / r;
}
function down(ev) {
  isactive = 1;
  x0 = ev.clientX;
  y0 = ev.clientY;
}
function up(ev) {
  if ( !isactive ) return;
  isactive = 0;

  var dx, dy;
  dx = ev.clientX - x0;
  dy = ev.clientY - y0;
  
  var dc, dr;
  dc = dx / x_c;
  dr = dy / y_r;

  c += dc; if ( c < 5 ) c = 5;
  r += dr; if ( r < 5 ) r = 5;
  
  ta.cols = c;
  ta.rows = r;
}
</script>
<body onmouseup='up(event)' onload='init()'>
<table>
<tr><td>
<textarea id="TA" rows=30 cols=80>
Click-and-drag the gray square to resize this box. I recommend using the middle button since it has fewer events already associated with it.
</textarea></td>
<td></td></tr>
<tr><td></td>
<td width=30 height=30 class=draggable onmousedown='down(event)'></td></tr>
</body>
</html>

```

I didn’t try binding to mousemove, though that could maybe give animated drag-and-drop.

---

<div class="post-metadata">

**Author:** ![Improv\_Geek](https://avatars.discourse-cdn.com/v4/letter/i/b3f665/32.png) [@Improv\_Geek](https://boards.straightdope.com/u/Improv_Geek)\
**Post date:** [February 24, 2006, 1:56am UTC](https://boards.straightdope.com/t/javascript-drag-drop-expand-contract-of-textarea/345848/3 "2006-02-24T01:56:11Z")

</div>

It’s a good start, thanks dude 🙂
