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>
           ...

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() {
	var draggableOptions = {
        cancel: "a.ui-icon",
        revert: true,
        helper: "clone",
        cursor: "move",
        revertDuration: 0
    }
    
    $(".dragable").draggable(draggableOptions);

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

});