Drag and Drop

Test code

by Puni Charana

HTML

<div id="droppable" class="draggable droppable sortable"></div>
<div id="draggable" class="droppable draggable sortable">
    <p id="hello11" class="item">Hello1</p>
    <p id="hello22" class="item">Hello2</p>
    <p id="hello33" class="item">Hello3</p>
    <p id="hello44" class="item">Hello4</p>
    <p id="hello55" class="item">Hello5</p>
</div>
<div id="form-container">
    <form method="post" action="">
        <input type="text" id="hello1" name="xoxo1" value="">
        <br>
        <br>
        <input type="text" id="hello2" name="xoxo2" value="">
        <br>
        <br>
        <input type="text" id="hello3" name="xoxo3" value="">
        <br>
        <br>
        <input type="text" id="hello4" name="xoxo4" value="">
        <br>
        <br>
        <input type="text" id="hello5" name="xoxo5" value="">
        <br>
        <br>
    </form>
</div>

CSS

#droppable {
    width: 40%;
    height: 500px;
    padding: 10px;
    float: left;
    background-color: #FFCC00;
}
#draggable {
    width: 40%;
    height: 500px;
    float: right;
    padding: 10px;
    background-color: #EECC55;
}
#form-container {
    width: 100%;
    height: auto;
    clear: both;
}
.item {
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    text-align: center;
    cursor: move;
}

JavaScript

jQuery(document).ready(function ($) {
  $(".sortable").sortable({
        connectWith: '.sortable',
        receive: function (event, ui) {
            // Set values
            //var myid = ui.item.attr("id").toString();
            //myid = myid.substring(0, myid.length - 1);
            //console.log(myFunction());
            document.getElementById('hello1').value = myFunction();
        },
        out: function (event, ui) {
            // Unset the values
            //console.log($(this).attr('id'));
            //console.log(myFunction());
            document.getElementById('hello1').value = myFunction();
        }
    });
});