Drag and drop example - HTML5

• text
• textarea

ADD these two libraries in your code at head tag https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js https://code.jquery.com/ui/1.12.1/jquery-ui.js

// script start
    var FieldTypeId;
    $(document).ready(function(){

        $(".draggable").draggable({
            cursor: "move",
            helper: 'clone',
            revert: "invalid",
            start: function( event, ui ) {
                FieldTypeId = $(this).attr("id");
            //    FieldType = $(this).find("span").html();
            }

        });
   

       $(".drop_1").droppable({
            tolerance: "intersect",
            accept: ".draggable",
            drop: function (event, ui) {
                if(FieldTypeId == "text")
                $(this).append("input type='text'");
//  When you run this code on you web page and put < input > before and after text
                if(FieldTypeId == "textarea")
                    $(this).append("");// rename textareaa with textarea  
            }
        })
    })
// script end