Dragon Drop

by JEFFERY PARNAU

HTML

<div id="wrapperyo">
	<div id="boundary-wrapper" class="boundary">

			<div class="campaign" id="parbarking01">
			</div>
			<div class="campaign" id="parbarking02" style="top: 200px;">
			</div>

			<div class="campaign" id="parbarking03" style="top: 300px;">
			</div>


	<div id="boundary1"></div>
	<div id="boundary2"></div>
	</div>
</div>

CSS

#wrapperyo{
  background-image: url('bg.png');
  width: 1280px;
  height: 720px;
}

.boundary{
  width: 280px;
  height: 412px;
  position: absolute;
}

#boundary1{
    border: 1px solid black;
   width: 300px;
   height: 422px;
}
#boundary2{
    border: 1px solid black;
  position: absolute;
  left: 301px;
  top: 0px;
   width: 300px;
   height: 422px;
}


#boundary-wrapper{
  top: 224px;
  width: 1202px;
  left: 26px;
  height: 422px;
}

.campaign {
  width: 160px;
  height: 60px;
  border: 2px solid white;
  border-radius: 6px;
  padding: 10px 0px 0px 10px;
  font-family: arial;
  color: white;
  font-size: 11pt;
  z-index: 1;
  left: 80px;
  position: absolute;
}

.campaign:hover, .campaign_selected:hover{
  cursor: pointer;
  z-index: 3;
}

/*.campaign_selected{
  width: 160px;
  height: 60px;
  background-color: #7ca4f5;
  border: 3px solid #d2e8fc;
  border-radius: 6px;
  padding: 10px 0px 0px 10px;
  font-family: arial;
  color: white;
  font-size: 11pt;
  margin: -2px 0px 0px -2px;
}*/

.campaign_selected{
  width: 160px;
  height: 60px;
  background-color: #7ca4f5;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 6px;
  padding: 10px 0px 0px 10px;
  font-family: arial;
  color: white;
  font-size: 11pt;
  -webkit-box-shadow: 0px 0px 5px 3px rgba(171,208,242,1);
  -moz-box-shadow: 0px 0px 5px 3px rgba(171,208,242,1);
  box-shadow: 0px 0px 5px 3px rgba(171,208,242,1);
  /*margin: -0px 0px 0px -0px;*/
  z-index: 2;
}

#parbarking01{
  background-color: #7ca4f5;
}

#parbarking02{
  background-color: #9ecb58;
}

#parbarking03{
  background-color: #fbaa4b;
}

.hovericons{
  width: 14px;
  height: 14px;
  /*background-color: red;*/
  position: absolute;
  bottom: 0px;
  margin-bottom: 5px;
}

.trash {
  left: 5px;
  background-image:url('trash.png');
  opacity: 0.5;
}

.trash:hover {
  opacity: 1;
  cursor: pointer;
}

.pencil {
  right: 5px;
  background-image:url('pencil.png');
  opacity: 0.5;
}

.pencil:hover {
  opacity: 1;
  cursor:...

JavaScript

$(function() {


//global vars to track current interaction info
var dragging = false;
var lastE;
var dragWhat;
var dragOffX;
var dragOffY;

//listen for mousedown on a campaign placeholder
$('.campaign').mousedown(function(e){
    //figure out where on the placeholder the user clicked
    dragOffX = e.pageX - $($(e.currentTarget)[0]).offset().left;
    dragOffY = e.pageY - $($(e.currentTarget)[0]).offset().top;
    //set global dragging to true
    dragging = true;
    //set global var with target of current drag interaction
    dragWhat = e.currentTarget;

});

//listen for mousemove and mouse up on body so that no matter where you mouse is when you let go it will register
$('body').mousemove(function(e){
    lastE = e;
}).mouseup(function(e){
    //you have released the mouse and aren't dragging anymore, so stop dragging!
    placeThingFinal(lastE);
    dragging = false;
    dragWhat = null;
});

//move the thing to where the mouse is (roughly)
var placeThing = function placeThing(e) {
    //determine the coordinates of the thing are based on where the mouse is and the offset between where the mouse is and the thing is
    var newX = e.pageX - dragOffX;
    var newY = e.pageY - dragOffY;

    //choose which column to highlight. De-highlight all other columns. You do not want to build on this if statement, your solution should use... something else...
    if(e.pageX <= 320){
      $('#boundary1').css({'background-color':'#FFD'});
      $('#boundary2').css({'background-color':'white'});
    }else if(e.pageX > 320){
      $('#boundary1').css({'background-color':'white'});
      $('#boundary2').css({'background-color':'#FFD'});
    }

    //keep the thing inside of the bounds of the draggable areas (keep the 20px gutters in mind)
    if(newX >= 40 && newX <= 440){
         $(dragWhat).offset({ left: newX });
    }else if(newX < 40){
      $(dragWhat).offset({ left: 40 });
    }else{
      $(dragWhat).offset({ left: 440 });
    }

    if(newY >= 240 && newY <=...