Cacher is the code snippet organizer for pro developers

<div><i>Add topics corresponding to the forum category. Please drag topics to selected box.</i></div>
<p></p>

<table style="width: 100%;">
    <tr>
        <td width="50%"><label> Existent Topics</label> </td>
        <td width="50%"><label> Topics Choosen</label> </td>
    </tr>
</table>

<div style="width: 100%; vertical-align:top;">
    <div style="height:300px;overflow:auto;" align="left" id="divDragableGreen" ondrop="drop(event)" draggable="false" ondragover="dragOver(event)">
        @{
            var topics = Model.topics_used.Split(',');
            foreach (var item in Model.topics)
            {
                if (!topics.Any(x => x.ToString() == item.TopicId.ToString()))
                {
                    <a href="~#" onclick="return false" class="DragabbleBox" id="@(item.TopicId)">@item.Name</a>
                }
            }
        }
    </div>


    <div style="height:300px;overflow:auto;" align="right" id="divDragableBlue" ondrop="drop(event)" draggable="false" ondragover="dragOver(event)">
        @{
            foreach (var item in Model.topics)
            {
                if (topics.Any(x => x.ToString() == item.TopicId.ToString()))
                {
                    <a href="~#" onclick="return false" class="DragabbleBox" id="@(item.TopicId)">@item.Name</a>
                }
            }

        }
    </div>
</div>


<script type="text/javascript">

        $(function () {
            var draggedSrcElement = null;

            if (Modernizr.draganddrop) {
                var cols = $('.DragabbleBox');
                [].forEach.call(cols, function (col) {
                    col.setAttribute('draggable', true);
                    col.setAttribute('ondragstart', 'dragStart(event)');
                });
            } else {
                alert('Current browser dosen`t support drag and drop feature.');
            }
        });

        function dragOver(e) {
            if (e.preventDefault) {
                e.preventDefault(); // It allows us to drop the object.
            }
            return false;
    }

    function dragStart(e) {
        e.dataTransfer.setData('Text', e.target.outerHTML); //Capturing dragged object`s html in datatransfer onject
        draggedSrcElement = e.target; //keeping reference of the current object.
    }

    function drop(e) {
        e.preventDefault();
        var isElementAvailable = true;

        var ctrl = e.target;

        if (e.target.id != 'divDragableGreen' && e.target.id != 'divDragableBlue') {
            ctrl = e.target.parentElement;
        }

        $(ctrl).children().each(function () {

            var currentElementId = $(this)[0].id;

            if (currentElementId == "") {
                currentElementId = $(this)[0].parentElement.id;
            }

            if (currentElementId == draggedSrcElement.id) {
                isElementAvailable = false;
                return;
            }
        });

        if (isElementAvailable) {

            var data = e.dataTransfer.getData('Text');
            if (e.target.id == 'divDragableGreen' || e.target.id == 'divDragableBlue') {
                $('#' + e.target.id).append(data);
            }
            else {
                $('#' + e.target.parentElement.id).append(data);
            }

            $('#' + draggedSrcElement.parentNode.id).children().each(function () {
                if (this.id == draggedSrcElement.id) {

                    if (draggedSrcElement.parentNode.id == 'divDragableGreen') {
                        $('#topics_used').val($('#topics_used').val() + this.id.toString());
                        $('#topics_used').val($('#topics_used').val() + ',');
                    }
                    else {
                        $('#topics_used').val($('#topics_used').val().replace(this.id + ',', ''));
                    }
                    $(this).remove();
                }
            });
        }
        return false;
    }

</script>

<style type="text/css">
    .DragabbleBox {
        border: 1px solid black;
        margin: 2px;
        width: auto;
        background-image: url('/Images/user.png');
        background-repeat: no-repeat;
        text-align: left;
        vertical-align: baseline;
        padding-left: 57px;
        height: 50px;
        background-color: #D3DCE0;
        cursor: move;
        font-weight: 600;
        display: block;
        text-decoration: none;
    }

    #divDragableGreen, #divDragableBlue {
        border: 1px solid #aaaaaa;
        width: 49%;
        display: inline-block;
        min-height: 400px;
        vertical-align: top;
        text-align: left;
    }
</style>