fix movable columns and range selection (#4431)

* fix movable columns and range selection

* refactor column events naming

src/js/modules/MoveColumns/MoveColumns.js

@@ -174,6 +174,13 @@ export default class MoveColumns extends Module{
 		headerElement = this.table.columnManager.getContentsElement(),
 		headersElement = this.table.columnManager.getHeadersElement();
 
+		//Prevent moving columns when range selection is active
+		if(this.table.modules.selectRange && this.table.modules.selectRange.columnSelection){
+			if(this.table.modules.selectRange.mousedown && this.table.modules.selectRange.selecting === "column"){
+				return;
+			}
+		}
+
 		this.moving = column;
 		this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(element).left;
 
@@ -203,6 +210,8 @@ export default class MoveColumns extends Module{
 		}
 
 		this.moveHover(e);
+
+		this.dispatch("column-moving", e, this.moving);
 	}
 
 	_bindMouseMove(){
@@ -259,7 +268,7 @@ export default class MoveColumns extends Module{
 			if(this.toCol){
 				this.table.columnManager.moveColumnActual(this.moving, this.toCol, this.toColAfter);
 			}
-			
+
 			this.moving = false;
 			this.toCol = false;
 			this.toColAfter = false;

src/js/modules/SelectRange/SelectRange.js

@@ -98,6 +98,8 @@ export default class SelectRange extends Module {
 		this.subscribe("column-mousedown", this.handleColumnMouseDown.bind(this));
 		this.subscribe("column-mousemove", this.handleColumnMouseMove.bind(this));
 		this.subscribe("column-resized", this.handleColumnResized.bind(this));
+		this.subscribe("column-moving", this.handleColumnMoving.bind(this));
+		this.subscribe("column-moved", this.handleColumnMoved.bind(this));
 		this.subscribe("column-width", this.layoutChange.bind(this));
 		this.subscribe("column-height", this.layoutChange.bind(this));
 		this.subscribe("column-resized", this.layoutChange.bind(this));
@@ -304,10 +306,26 @@ export default class SelectRange extends Module {
 		});
 	}
 
+	handleColumnMoving(_event, column) {
+		this.resetRanges().setBounds(column);
+		this.overlay.style.visibility = "hidden";
+	}
+
+	handleColumnMoved(from, _to, _after) {
+		this.activeRange.setBounds(from);
+		this.layoutElement();
+	}
+
 	handleColumnMouseDown(event, column) {
 		if (event.button === 2 && (this.selecting === "column" || this.selecting === "all") && this.activeRange.occupiesColumn(column)) {
 			return;
 		}
+
+		//If columns are movable, allow dragging columns only if they are not
+		//selected. Dragging selected columns should move the columns instead.
+		if(this.table.options.movableColumns && this.selecting === "column" && this.activeRange.occupiesColumn(column)){
+			return;
+		}
 
 		this.mousedown = true;