Grid of images

Re-orderable grid of images. 1. Hold and drag an image to another. Make sure the mouse pointer indicates the target location

by Niranjan

HTML

<table id="grid"/>

CSS

.cellclass {width: 350px; height: 250px;}

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(obj, i){
  var row, col;
  row = Math.floor(i/2); col = i%2;
  
  console.log("col*width "+col*width+" parseInt(obj.style.left,10) "+parseInt(obj.style.left,10)+" (col+1)*width) "+(col+1)*width));
  
  return ((col*width < parseInt(obj.style.left,10) && parseInt(obj.style.left,10) < (col+1)*width) && (row*height <...