You can copy or cut a range, and paste it in the current sheet or another sheet. In this case, the copied cells' values and styles are both copied; however, if you paste content from the Spread component into another application, such as Notepad or Excel, only the value is pasted. You can also copy or cut from another application and then paste in the Spread component.
If you cut or copy some cells, the control will display an indicator to tell you which range you have copied. You can use the cutCopyIndicatorVisible option to control whether to display the indicator, and use the cutCopyIndicatorBorderColor option to set the indicator's border color, as shown in the following code:
You can drag a range and drop it in another cell. If you press the Ctrl key when you drop it, you will copy the dragged cells. If you don't press the Ctrl key, you will cut the dragged cells.
SpreadJS provides the allowUserDragDrop option to control whether users can drag and drop cell range data to another range. In addition, you can use the showDragDropTip option to control whether to display the tip when dragging. The tip shows the location to which you are dragging.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.fromJSON(data[0]);
_getElementById('chkShowDragDropTip').addEventListener('click', function() {
spread.options.showDragDropTip = _getElementById('chkShowDragDropTip').checked;
});
_getElementById('chkAllowUserDragDrop').addEventListener('click', function() {
spread.options.allowUserDragDrop = _getElementById('chkAllowUserDragDrop').checked;
});
_getElementById('cutCopyIndicatorVisible').addEventListener('change', function() {
var value = _getElementById('cutCopyIndicatorVisible').checked;
spread.options.cutCopyIndicatorVisible = value;
});
_getElementById('setCutCopyIndicatorBorderColor').addEventListener('click', function() {
var value = _getElementById('cutCopyIndicatorBorderColor').value;
spread.options.cutCopyIndicatorBorderColor = value;
});
_getElementById('setIsProtected').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var value = _getElementById('setIsProtected').checked;
sheet.options.isProtected = value;
});
}
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/data/data.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>
<script src="data.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">
<input id="chkAllowUserDragDrop" type="checkbox" checked="checked" />
<label for="chkAllowUserDragDrop" class="sizedLabel">AllowUserDragDrop</label>
</div>
<div class="option-row">
<input id="chkShowDragDropTip" type="checkbox" checked="checked" />
<label for="chkShowDragDropTip" class="sizedLabel">ShowDragDropTip</label>
</div>
<div class="option-row">
<input type="checkbox" id="cutCopyIndicatorVisible" checked="checked" />
<label for="cutCopyIndicatorVisible" class="sizedLabel">CutCopyIndicatorVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="setIsProtected" />
<label for="setIsProtected" class="sizedLabel">IsProtected</label>
</div>
<hr>
<div class="option-row">
<label>Enter a color name like "red" or "blue" for change the color of the cut/copy indicator border.</label>
</div>
<label>Cut/Copy Indicator Border Color:</label>
<div class="option-row">
<input type="text" style="margin:0 8px; width: 150px;" id="cutCopyIndicatorBorderColor" />
<input type="button" value="Set" id="setCutCopyIndicatorBorderColor"/>
</div>
</div>
</div>
</body>
</html>
var data = [{
"version":"12.0.0",
"tabStripRatio":0.6,
"sheetCount":1,
"sheets":{
"Sheet1":{
"name":"Sheet1",
"rowCount":114,
"columnCount":21,
"activeRow":2,
"activeCol":2,
"data":{
"dataTable":{
"0":{
"0":{
"value":"Salesperson",
"style":
{
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
},
"1":{
"value":"Region",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
},
"2":{
"value":"Sales",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#808080",
"hAlign" : 1
}
}
},
"1":{
"0":{
"value":"Ally",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":24234324,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"2":{
"0":{
"value":"Tom",
"style":{"hAlign" : 1}
},
"1":{
"value":"South",
"style":{"hAlign" : 1}
},
"2":{
"value":2342342,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"3":{
"0":{
"value":"Jack",
"style":{"hAlign" : 1}
},
"1":{
"value":"South",
"style":{"hAlign" : 1}
},
"2":{
"value":324234,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"4":{
"0":{
"value":"John",
"style":{"hAlign" : 1}
},
"1":{
"value":"West",
"style":{"hAlign" : 1}
},
"2":{
"value":2342443,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"5":{
"0":{
"value":"Lily",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":2342342,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"6":{
"0":{
"value":"Linda",
"style":{"hAlign" : 1}
},
"1":{
"value":"East",
"style":{"hAlign" : 1}
},
"2":{
"value":5857858,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
},
"7":{
"0":{
"value":"Will",
"style":{"hAlign" : 1}
},
"1":{
"value":"North",
"style":{"hAlign" : 1}
},
"2":{
"value":437587965,
"style":{"hAlign" : 1, "formatter": "$#,##0"}
}
}
}
},
"defaults": {"colHeaderRowHeight": 20, "colWidth": 120, "rowHeaderColWidth": 40, "rowHeight": 26},
}
}
}];
label {
display:inline-block;
}
.sizedLabel {
width: 180px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
.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;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
