PHP - Inventory System

<script src="http://code.interactjs.io/interact-1.2.2.min.js"></script>
<script>
	function qs(expr){return document.querySelector(expr)}
</script>
<style>
.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:.7s;-webkit-animation-duration:.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1);opacity:1}}
.InventoryTest{
	border:1px solid #D3D3D3;border-bottom:0;width:24px;height:24px;float:left;padding:3px;border-right:0;
}
.itemdrag{position:relative;z-index:1}
 
.InventoryTest:nth-child(9n+9){
	border-right:1px solid #D3D3D3
}
.InventoryTest:nth-last-child(-n+9){
 border-bottom:1px solid #D3D3D3;
}
.itemdrag{position:relative;z-index:1}
</style>
	<?php 
		error_reporting(E_ERROR);
		//Display 63 boxes (Fits with the css nth-child tags to look pretty! lol)
		for($i = 1; $i < 64; $i++){
			if ($i == 1){ // Slot positions 1 Dimensions: 3x3 (lengthXwidth)
				$item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/3azYLNf.png></div>';
			}elseif($i==4){ // Slot position 2 Dimensions 2x1 lengthXwidth)
				$item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/l3y0W7d.png></div>';
			}else{$item1 = '';}
			
			

			$inventoryboxes .= '<div class="InventoryTest" data-slot='.$i.'>'.$item1.'</div>';
		}
	?>
	<div style="width:300px">
	<?php echo $inventoryboxes ?>
</div>

<script>
	
	  
// target elements with the "draggable" class
interact('.itemdrag')
  .draggable({
  
    // enable inertial throwing
    inertia: true,
	onstart: function (event) {
		
		},
 
    // call this function on every dragmove event
    onmove: function (event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

 
      // translate the element
	  target.style.position = "relative";
	  target.style.zIndex="2500";
      target.style.webkitTransform = target.style.transform ='translate(' + x + 'px, ' + y + 'px)';
	
 
 
      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    // call this function on every dragend event
    onend: function (event) {
	  var target = event.target;
 
		target.removeAttribute("style");
		target.removeAttribute("data-x");
		target.removeAttribute("data-y");
  
    }
  });
  
interact('.InventoryTest').dropzone({
	
	
  // only accept elements matching this CSS selector
  accept: '.itemdrag',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.40,

  // listen for drop related events:

  ondropactivate: function (event) {
  var draggableid = event.relatedTarget;
    // add active dropzone feedback
	// Is this and item that can be equipped?

	if (event.relatedTarget.getAttribute('item-type') != "Misc"){
	 //qs('#shadow'+draggableid.getAttribute('item-type')+'').style.display='none';
	}
		
	
	
	
    event.target.classList.add('drop-ACCEPT');
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
	

    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
    //draggableElement.textContent = 'Dragged in';
  },
  ondragleave: function (event) {
    // remove the drop feedback style
	
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    //event.relatedTarget.textContent = 'Dragged out';
  },
  ondrop: function (event) {
	var dragid = event.relatedTarget;
	if (event.target.hasChildNodes()) {
	//console.log(event.target.childNodes[1]);
	return;
	}
	
	var slotp = event.target.getAttribute("data-slot");
	var slotp2 = event.relatedTarget.getAttribute("data-cslot");
	var shadowid = qs('#shadow'+dragid.getAttribute('item-type')+'');
	var item_id = event.relatedTarget.getAttribute("item_id"); // <-- The one being dragged
	
	//We need to show the shadow gear again.
	(shadowid) ? shadowid.style.display='inline-block': '';
	

	
 
	
	
	qs('[data-slot="'+slotp2+'"]').innerHTML='';
	qs('[data-slot="'+slotp+'"]').appendChild(event.relatedTarget);
	
	event.target.childNodes[0].setAttribute("data-cslot", slotp);
	
	//We do our ajax functions here, just log the information for now:
	console.log(" item_id="+item_id+"&slot_go="+slotp+"  ");
 
 
	
	
	event.relatedTarget.className += ' fadeIn';
	

	
	
	//console.log(event.relatedTarget);
	//console.log(event.target);
    //event.relatedTarget.textContent = 'Dropped';
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-ACCEPT');
    event.target.classList.remove('drop-target');
  }
});
</script>


	

0,0,0,0,0
0,0,0,0,0
0,0,0,0,0
0,0,0,0,0