FlexSheet | Copy cell with drag and drop

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20172.334/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.grid.sheet.min.js"></script>
<div class="container">
	<h1>
		Copy FlexSheet cells using drag & Drop functionality
	</h1>
	<p>
	This fiddle demonstrate how FlexSheet cells <span style="font-weight:bold;">data</span> can be copied using <b>drag and drop</b>. For copying cells, select target cells and move mouse pointer to bottom right of the selection, start dragging once mouse pointer gets changed, drop at target cell. The data will be copied from bottom cell to upwards.
	</p>
	<div id="theSheet" style="height:500px;"></div>	
</div>

CSS

.wj-dragover{
				border:2px solid black;
				opacity: 1;			
				position: absolute;
				pointer-events: none;	
			}
			.wj-tooltip{
				background-color: grey!important;
				border-radius:0!important;
			}

JavaScript

onload=function(){
        		var cvData= new wijmo.collections.CollectionView(getData(100));
           		var flexSheet= new wijmo.grid.sheet.FlexSheet("#theSheet");
           		flexSheet.addBoundSheet("Sheet1",cvData);
           		dragCopyCells(flexSheet);  
           		// flexSheet.hostElement.addEventListener('mousemove',function(e){
           		// 	var ht= flexSheet.hitTest(e);
           		// 	_scrollFlexSheet(flexSheet,ht);
           		// });         		
            }
            function getData(count){
            	var countries="US,Japan,UK,Italy,Greece,India".split(","),
            	data=[];
            	for (var i=0; i < count; i++) {
            		data.push({
            			id:i,
            			country:countries[i%countries.length],
            			sales:Math.random()*1000,
            			downloads:Math.random()*1000,
            			active:i%4==0
            		});
            	}
            	return data;
            }

            function dragCopyCells(flexSheet){
				var drop={},
					div,
					data=[],
					isIE=typeof document.createElement("DIV").dragDrop=="function",
					tp=new wijmo.Tooltip();
            	flexSheet.hostElement.addEventListener("mousemove",function(e){		

					if(_isCellBottomRight(flexSheet,e)){
						flexSheet.cells.getCellElement(flexSheet.selection.bottomRow,flexSheet.selection.rightCol).style.cursor="move";
					}
				},true);
				flexSheet.hostElement.addEventListener("mousedown",function(e){					
					if(_isCellBottomRight(flexSheet,e)){
						//prevent Mouse down event and change mouse pointer and make cell draggable
						e.stopPropagation();			
						flexSheet.cells.getCellElement(flexSheet.selection.bottomRow,flexSheet.selection.rightCol).draggable=true;						
						flexSheet.cells.getCellElement(flexSheet.selection.bottomRow,flexSheet.selection.rightCol).style.cursor="move";						
						if(isIE){							
							drop['cellRange']=flexSheet.selection;
							// set custom drag Image for IE/Edge
							var...