<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	border:0;
    background-color:#D6D6D6;
	-webkit-user-select:none;
}

ul 
{
	list-style-type:none;
    background-color:#D6D6D6;
}
li
{
    background-color:#C7C7C7;
    margin-top:10px;
	height:22px;
	width:22px;
    border-style:solid;
    border-top-color:rgba(0,0,0,0.5);
    border-left-color:rgba(0,0,0,0.5);
    border-bottom-color:rgba(255,255,255,0.5);
    border-right-color:rgba(255,255,255,0.5);
    border-top-width:1px;
    border-left-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
}
</style>
<script>
var GLOBAL_OBJECT = {};
var gradientStringArray = new Array();
var maxNumberOfSwatches = 5;
    
function LIClicked(node) {
    var childs = node.parentNode.getElementsByTagName("LI"), listIndex = 0, childIndex = 0;
    for (childIndex = 0; childIndex < childs.length; ++childIndex) {
		if(childs[childIndex] === node) {
			return getIndex(childIndex, "gradient_swatch_grid");
		}
    }
}
function addSwatch(newGradientString) {
    if(gradientStringArray.length == maxNumberOfSwatches)
       gradientStringArray.shift();
    gradientStringArray.push(newGradientString);
    applyGradientStyle();
}

function applyGradientStyle() {
    try{
    var listIndex;
    var swatchLength = gradientStringArray.length;
    var listNodes = document.getElementById("GradientSwatchContainer").getElementsByTagName("LI");
    for(listIndex = 0; listIndex < swatchLength; ++listIndex) {
        if( listNodes[listIndex])
            listNodes[listIndex].style.backgroundImage =  gradientStringArray[swatchLength - listIndex - 1];
    }
}
    catch(e)
    {
        alert(e);
    }
}
 var dragSrcEl = null;
var dropDone = false;   
function  handleDragEnd(target, e) {
   // alert(target);
    if(!dropDone && dragSrcEl) {
        dragSrcEl.parentNode.removeChild(dragSrcEl);
        dropDone = false;
    }
        
        
}
function handleDragStart(target, e) {
  // Target (this) element is the source node.
  dragSrcEl = target;
    dropDone = false;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDrop(target, e) {
    if(target.tagName == "LI") {
  // this/e.target is current target element.
  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != target) {
    // Set the source column's HTML to the HTML of the column we dropped on.
      var temp = dragSrcEl.innerHTML;
    dragSrcEl.innerHTML = target.innerHTML;
    target.innerHTML = temp;
  }
    dropDone = true;
}
  return false;
}

</script>
</head>

<body style="top:0px;" onload=addSwatch("hello") ondragenter="return false" ondragover="return false" ondrop="handleDrop(this,event)" ondragend= "handleDragEnd(this,event)">
<ul id = "GradientSwatchContainer">
  <li onClick="LIClicked(this);" draggable="true" ondragenter="return false" ondragover="return false" ondragstart="handleDragStart(this,event)" ondrop="handleDrop(this,event)"></li>
  <li onClick="LIClicked(this);" draggable="true"  ondragenter="return false" ondragover="return false" ondragstart="handleDragStart(this,event)" ondrop="handleDrop(this,event)"></li>
  <li onClick="LIClicked(this);" draggable="true" ondragenter="return false" ondragover="return false" ondragstart="handleDragStart(this,event)" ondrop="handleDrop(this,event)"></li>
  <li onClick="LIClicked(this);" draggable="true" ondragenter="return false" ondragover="return false" ondragstart="handleDragStart(this,event)" ondrop="handleDrop(this,event)"></li>
  <li onClick="LIClicked(this);" draggable="true" ondragenter="return false" ondragover="return false" ondragstart="handleDragStart(this,event)" ondrop="handleDrop(this,event)"></li>
</ul>
</body>
</html>
