JSFiddle - React, Tailwind, and code Playground

by Istiaque AHmed

HTML

<link rel="stylesheet" href="https://epractice.lcbsdhaka.com/mytest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.css">
<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-1.12.4.js"></script>
<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="https://epractice.lcbsdhaka.com/mytest/js/bootstrap.min.js"></script>
<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery.simulate.js"></script>
<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.ext.js"></script>
<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.drag-n-drop.js"></script>
<div class="dragndrop-questions row">



    <div >
        <div  style="width:30%; float: left; " >
            <ul class="option option-left" id="draggable">

                <li class111="draggable" class="draggable_container_indiv noselect" >
                    <div class="draggable_div" data-index="1">

                        USA
                    </div>
                </li>

                <li class111="draggable" class="draggable_container_indiv noselect" >
                    <div class="draggable_div" data-index="2">

                        JAPAN
                    </div>
                </li>

                <li class111="draggable" class="draggable_container_indiv noselect" >
                    <div class="draggable_div" data-index="3">

                        CHINA
                    </div>
                </li>

            </ul>
        </div>
        <div class111="col-sm-8" style="width:65%; float: right; margin-right: 10px;" >
            <ul class="option option-right" id="droppable_slots">


                    <div class="row ">
                        <div
                             style="width:45%; float: left; margin-left:10px; border: 1px solid...

CSS

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.draggable_container_indiv{

    border: 1px solid green;

}

#draggable .draggable_div {
    margin-left: -60px;
    padding: 10px;
}
.droppable_blank{
    /*line-height: 40px;*/
    vertical-align: middle;
}
#draggable li, #draggable .draggable_div, #droppable_slots li, .draggable_div{
    list-style: none;
}
.dragndrop-questions ul.option-left li{
    padding-top: 0;
}
.match-questions ul.option-left li, .dragndrop-questions ul.option-left li{
    font-size: 14px;
    color: #656f7d;
    position: relative;
    padding-left: 60px;
    min-height: 40px;
}

.draggable_container_indiv{

    margin-bottom: -10px !important;
}

JavaScript

drag_stop_counter=0;


    answers_found='[1,2,3]';



    answer_all_zero=0;//REMOVABLE





    if(answers_found!="".trim()){

        answers_found=$.parseJSON(answers_found);
        answer_all_zero=1;
        for(var i=0; i<answers_found.length; i++){

            if(parseInt(answers_found[i])!=0){
                answer_all_zero=0;
                break;


            }

        }//end of for loop





    }
    total_answers_found=answers_found.length;
    total_actual_answers_found=0;

    for(var i=0; i<answers_found.length; i++){

        if(parseInt(answers_found[i])){

            ++total_actual_answers_found;
        }


    }//end of for loop






    answers=[];
    answers_made_for_insert=[];

    question_id=2901;

    //Following function is triggered
    //when the dNd component is starting the drop
    //event
    function trigger_drop(draggable_elem_index,droppable_elem_index ) {

        if(draggable_elem_index && droppable_elem_index){



            if(window.console){
                console.log("from within trigger_drop : draggable_elem_index = "+draggable_elem_index+" droppable_elem_index=  "+droppable_elem_index);

            }
            // var draggable = $(".draggable_container_indiv .draggable_div").eq(draggable_elem_index-1).draggable(),
            var draggable = $(".draggable_container_indiv").eq(draggable_elem_index-1).find(".draggable_div").draggable(),
                droppable = $("#droppable_slots .droppable_blank").eq(droppable_elem_index-1).droppable(),

                droppableOffset = droppable.offset(),
                draggableOffset = draggable.offset(),
                dx = droppableOffset.left - draggableOffset.left,
                dy = droppableOffset.top - draggableOffset.top;

            draggable.simulate("drag", {
                dx: dx,
                dy: dy
            });
        }// end of if(draggable_elem_index && droppable_elem_index){
    }// end of function trigger_drop(

    //answers stored...