Drag and drop elements from list into separate blocks

Question

I\'m trying to get a jQuery component similar to the one on this site.

Basically, there is a list with available elements that you can drag and drop into several blo

Answer 1

 function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            $("#maincontainer").append("
Name
Country
Experience
Technologies
  Bhanu Pratap   
 India 
  3 years   
  Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...
");
        }

 .droptarget {
            float: left;
            min-height: 100px;
            min-width: 200px;
            border: 1px solid black;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        [contentEditable=true]:empty:not(:focus):before {
            content: attr(data-text);
        }

        
Drag Table
    

    

1. this is just simple here i'm appending html table into a div at the end
2. we can achieve this or any thing with a simple concept of calling a JavaScript function when we want (here on drop.)
3. In this example you can drag & drop any number of tables, new table will be added below the last table exists in the div other wise it will be the first table in the div.
4. here we can add text between tables or we can say the section where we drop tables is editable we can type text between tables.

Thanks... :)