Resizable: add resizable_throttle option to throttle mousemove event. Fixes #662

docs/index.html

@@ -1680,6 +1680,8 @@ $(function(){
       resizable_addLastColumn: false,
       // Add the starting & reset header widths
       resizable_widths : [],
+      // throttle resizable event (needed for slow browsers)
+      resizable_throttle : false,
 
       // *** savesort widget ***
       // if false, the sort will not be saved for next page reload
@@ -2879,6 +2881,33 @@ $('table').trigger('search', false);</pre></div>
 				<td><a href="example-widget-resizable.html">Example</a></td>
 			</tr>
 
+			<tr id="widget-resizable-throttle">
+				<td><a href="#" class="permalink">resizable_throttle</a></td>
+				<td>Boolean</td>
+				<td>false</td>
+				<td>
+					Resizable widget: Set this option to throttle the resizable events (<span class="version">v2.17.4</span>).
+					<div class="collapsible">
+					<br>
+					When <code>false</code> throttling of the mousemove (resizing) event is not applied.<br>
+					<br>
+					Set this option to either <code>true</code> for a default 5 millisecond delay, or set it to any number less than 10 to adjust the throttling delay that is applied to the mousemove/resizing event.<br>
+					<br>
+					Use the <a href="#widget-resizable-throttle"><code>&quot;resizable_widths&quot;</code></a> option as follows:
+					<pre class="prettyprint lang-js">$(function(){
+  $("table").tablesorter({
+    widgets: ["resizable"],
+    widgetOptions : {
+      // set to true for a default 5ms throttling delay
+      // or set to a number < 10 (more than that makes the resizing adjustment unusable
+      resizable_throttle : true
+    }
+  });
+});</pre></div>
+				</td>
+				<td></td>
+			</tr>
+
 			<tr id="widget-savesort">
 				<td><a href="#" class="permalink">saveSort</a></td>
 				<td>Boolean</td>

js/jquery.tablesorter.widgets.js

@@ -1506,19 +1506,31 @@ ts.addWidget({
 	options: {
 		resizable : true,
 		resizable_addLastColumn : false,
-		resizable_widths : []
+		resizable_widths : [],
+		resizable_throttle : false // set to true (5ms) or any number 0-10 range
 	},
 	format: function(table, c, wo) {
 		if (c.$table.hasClass('hasResizable')) { return; }
 		c.$table.addClass('hasResizable');
 		ts.resizableReset(table, true); // set default widths
-		var $rows, $columns, $column, column,
+		var $rows, $columns, $column, column, timer,
 			storedSizes = {},
 			$table = c.$table,
 			mouseXPosition = 0,
 			$target = null,
 			$next = null,
 			fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
+			mouseMove = function(event){
+				if (mouseXPosition === 0 || !$target) { return; }
+				// resize columns
+				var leftEdge = event.pageX - mouseXPosition,
+					targetWidth = $target.width();
+				$target.width( targetWidth + leftEdge );
+				if ($target.width() !== targetWidth && fullWidth) {
+					$next.width( $next.width() - leftEdge );
+				}
+				mouseXPosition = event.pageX;
+			},
 			stopResize = function() {
 				if (ts.storage && $target && $next) {
 					storedSizes = {};
@@ -1587,14 +1599,14 @@ ts.addWidget({
 		.bind('mousemove.tsresize', function(event) {
 			// ignore mousemove if no mousedown
 			if (mouseXPosition === 0 || !$target) { return; }
-			// resize columns
+			if (wo.resizable_throttle) {
-			var leftEdge = event.pageX - mouseXPosition,
+				clearTimeout(timer);
-				targetWidth = $target.width();
+				timer = setTimeout(function(){
-			$target.width( targetWidth + leftEdge );
+					mouseMove(event);
-			if ($target.width() !== targetWidth && fullWidth) {
+				}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
-				$next.width( $next.width() - leftEdge );
+			} else {
+				mouseMove(event);
 			}
-			mouseXPosition = event.pageX;
 		})
 		.bind('mouseup.tsresize', function() {
 			stopResize();