Grid of images

Re-orderable grid of images. 1. Hold and drag an image to another. 2. Target location if the image is the (x,y) of the top-left corner. After dragging and dropping an image into another, the images will swap only if the top-left corner of the image being dragged is inside the image it is being dropped into. Else, the image will fallback in it's place

by Niranjan

HTML

<table id="grid"/>

CSS

.cellclass {width: 350px; height: 250px;vertical-align:top}
#grid {position: absolute; top: 0px;left:0px;}

JavaScript

//Array of images
var images = [
	{
		name: '1',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/1.png?ssl=1&w=350'
	},
  {
		name: '2',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/2.png?ssl=1&w=350'
	},
  {
  	name: '3',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/3.png?ssl=1&w=350'
  },
  {
  	name: '4',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/4.png?ssl=1&w=350'
  },
  	{
		name: '5',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/5.png?ssl=1&w=350'
	},
  {
		name: '6',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/6.png?ssl=1&w=350'
	},
  {
  	name: '7',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/7.png?ssl=1&w=350'
  },
  {
  	name: '8',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/8.png?ssl=1&w=350'
  },
  {
		name: '9',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/9.png?ssl=1&w=350'
	},
  {
		name: '10',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/10.png?ssl=1&w=350'
	},
  {
  	name: '11',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/11.png?ssl=1&w=350'
  },
  {
  	name: '12',
    src: 'https://i0.wp.com/niranjanshukla.files.wordpress.com/2016/06/12.png?ssl=1&w=350'
  }
];

//inprogress -- block-id of image div that is being dragged
var inprogress = -1, width = 350, height = 250;

//function that detects whether images overlapped.
//IMP: To drag an image into another, make sure the mouse pointer indicates the target location
function overlap(inprogress, i){
  
  var obj = document.getElementById(inprogress);
  var row, col;
  row = Math.floor(i/2); col = i%2;
	var index = inprogress.replace("block",'');
  
  return ((col*width < parseInt(obj.style.left,10) + ((index%2)*350) && parseInt(obj.style.left,10) + ((index%2)*350) < (col+1)*width) && (row*height <...