SpreadJS allows you to move rows or columns by drag row or column headers.
First select the row or column headers, then drag the selected row or column headers to move the rows or columns:
Users can specifies how to allow drag header to move through the following API:
The available options in GC.Spread.Sheets.AllowDragHeaderToMove:
none: Specifies that no drag header to move allowed.
column: Specifies that only the column header allow to move.
row: Specifies that only the row header allow to move.
both: Specifies that both column and row header allow to move.
window.onload = async () => {
const loadingTip = addLoadingTip();
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
const res = await fetch('$DEMOROOT$/en/sample/features/worksheet/drag-header-to-move/spread.json');
await spread.fromJSON(await res.json());
spread.options.allowDragHeaderToMove = GC.Spread.Sheets.AllowDragHeaderToMove.none;
loadingTip.remove();
/*
* Show or hide the column header.
*/
_getElementById("allowDragHeaderToMove").addEventListener('change',function (e) {
spread.options.allowDragHeaderToMove = e.target.value;
});
}
function addLoadingTip() {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.inset = '0';
div.style.display = 'flex';
div.style.alignItems = 'center';
div.style.justifyContent = 'center';
div.style.background = 'white';
div.style.zIndex = '100';
div.textContent = 'Loading data from server ...';
document.body.appendChild(div);
return div;
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<p>First select the row or column headers, then drag the selected row or column headers to move the rows or columns.</p>
</div>
<hr>
<div class="option-row">
<p>Set the options below to specify how to allow drag header to move.</p>
</div>
<div class="option-row">
<label for="allowDragHeaderToMove" class="label">Drag header to move:</label>
<select id="allowDragHeaderToMove" >
<option value="0" selected>None</option>
<option value="1">Column</option>
<option value="2">Row</option>
<option value="3">Both</option>
</select>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
