sheikh

HTML

<div class="main-container">
  <div class="wrapper">
    <div class="tb-head">

      <div class="target">
        <span class="target-span">Target</span>
      </div>

      <div class="user1">
        <span class="user1-span">User1</span>
      </div>

      <div class="user2">
        <span class="user2-span">User2</span>
      </div>

      <div class="user3">
        <span class="user3-span">User3</span>
      </div>

      <div class="user4">
        <span class="user4-span">User4</span>
      </div>

      <div class="clear"></div>
    </div>

    <div class="tb-body">

      <div class="inner-target">

        <div class="dragable">
          <span class="targetinn-span">Target Lead</span>
        </div>

        <div class="dragable">
          <span class="targetinn-span">Assign1 Lead</span>
        </div>

        <div class="dragable">
          <span class="targetinn-span">Assign2 Lead</span>
        </div>

        <div class="dragable">
          <span class="targetinn-span">Assign3 Lead</span>
        </div>

      </div>

      <div class="inner-user1">
        <div class="droppable">
          <span class="user1inn-span"></span>
        </div>
      </div>

      <div class="inner-user2">
        <div class="droppable">
          <span class="user2inn-span"></span>
        </div>
      </div>

      <div class="inner-user3">
        <div class="droppable">
          <span class="user3inn-span"></span>
        </div>
      </div>

      <div class="inner-user4">
        <div class="droppable">
          <span class="user4inn-span"></span>
        </div>
      </div>

      <div class="clear"></div>
    </div>
  </div>

CSS

body {}

.main-container {}

.wrapper {
  border: 1px solid #ddd;
  width: 87%;
  margin: 0px auto;
  height: 230px;
  margin-top: 4%;
}

.tb-head {
  border-bottom: 1px solid #ddd;
  background-color: #53892f;
  padding: 3%;
}

.clear {
  clear: both;
}

.target {
  float: left;
  margin-left: 4%;
  color: white;
}

.user1 {
  float: left;
  margin-left: 16%;
  color: white;
}

.user2 {
  float: left;
  margin-left: 18%;
  color: white;
}

.user3 {
  float: left;
  margin-left: 15%;
  color: white;
}

.user4 {
  float: left;
  margin-left: 16%;
  color: white;
}

.tb-body {
  width: 100%;
  text-align: center;
}

.tb-body .inner-target {
  height: 141px;
  color: #1990CC !important;
  ;
  border-right: 1px solid #ddd;
  float: left;
  width: 17.7%;
  border-bottom: 1px solid #ddd;
  padding: 1%;
}

.tb-body .inner-user1 {
  height: 141px;
  color: #1990CC !important;
  float: left;
  width: 17.8%;
  border-right: 1px solid #ddd;
  padding: 1%;
  border-bottom: 1px solid #ddd;
}

.tb-body .inner-user2 {
  height: 141px;
  color: #1990CC !important;
  float: left;
  width: 17.7%;
  border-right: 1px solid #ddd;
  padding: 1%;
  border-bottom: 1px solid #ddd;
}

.tb-body .inner-user3 {
  height: 141px;
  color: #1990CC !important;
  float: left;
  width: 17.8%;
  border-right: 1px solid #ddd;
  padding: 1%;
  border-bottom: 1px solid #ddd;
}

.tb-body .inner-user4 {
  height: 141px;
  color: #1990CC !important;
  float: left;
  width: 17.7%;
  border-right: none;
  padding: 1%;
  border-bottom: 1px solid #ddd;
}

.dragable {
  border: 1px solid;
  margin-bottom: 12px;
}

.droppable {
  width: 100%;
  height: inherit;
}

JavaScript

$(document).ready(function() {

  $(".dragable").draggable({
    cancel: "a.ui-icon",
    revert: true,
    helper: "clone",
    cursor: "move",
    revertDuration: 0
  });

  $('.droppable').droppable({
    accept: ".dragable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
      // clone item to retain in original "list"
      var $item = ui.draggable.clone();

      $(this).addClass('has-drop').append($item);

    }
  });

});