title: Drag a picture, append html that corresponds to the picture
body: <p>I'm new in jQuery and I would like to create a drag and drop HTML builder.</p>
  
  <p>I have 2 divs: in the first I have pictures that represents HTML blocks in the other div I would like to have a sortable list with the divs that corresponds to the dropped picture.</p>
  
  <p>I've tried a lot of things but It doesn't work. Here is one of multiple parts of code that I've tried : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Drag and Drop tests&lt;/title&gt;
  
      &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;style&gt;
          #div_1{height:200px;width:400px;border:5px dotted red;}
          #div_2{height:200px;width:400px;background-color:yellow;}
          #left{
              width:400px;
              min-height:400px;
              max-height:;
              float:left;
              border:1px solid black;
              margin:0;padding:0;
          }
          #right{
              width:420px;
              float:right;
              border: 1px solid red;
              margin:0;
              padding:0;
          }
      &lt;/style&gt;
  
      &lt;script&gt;
          $(function(){
              $(function(){
                  $("#left").sortable({
                      revert: true
                  });
              });
              $(function(){
                  $(".my_div").draggable({
                      connectToSortable: "#left",
                      helper: "clone",
                      stop: function(e, ui){
                          $("#left").clone().append($(".bloc[data-id="+$(this).attr("data-id")+"]"));
                      }
                  });
              });
              $("div").disableSelection();
          }); 
      &lt;/script&gt;
  
      &lt;div class="bloc" id="div_1" data_id="1"&gt;&lt;/div&gt;
      &lt;div class="bloc" id="div_2" data-id="2"&gt;&lt;/div&gt;
  
      &lt;div id="wrap" style="width:1000px;margin:auto"&gt; 
          &lt;div id="left"&gt;
  
          &lt;/div&gt;
  
          &lt;div id="right" &gt;
              &lt;table width="100%" style="text-align:center;height:100%"&gt;
              &lt;tbody&gt;
                  &lt;tr style="height:133px"&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1"&gt;
                              &lt;img src="_pictures/1.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2"&gt;
                              &lt;img src="_pictures/2.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3"&gt;
                              &lt;img src="_pictures/3.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr style="height:133px"&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4"&gt;
                              &lt;img src="_pictures/4.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5"&gt;
                              &lt;img src="_pictures/5.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6"&gt;
                              &lt;img src="_pictures/6.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr style="height:133px"&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7"&gt;
                              &lt;img src="_pictures/7.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8"&gt;
                              &lt;img src="_pictures/8.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9"&gt;
                              &lt;img src="_pictures/9.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr style="height:133px"&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10"&gt;
                              &lt;img src="_pictures/10.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11"&gt;
                              &lt;img src="_pictures/11.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12"&gt;
                              &lt;img src="_pictures/12.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr style="height:133px"&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13"&gt;
                              &lt;img src="_pictures/13.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14"&gt;
                              &lt;img src="_pictures/14.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="my_td_parent"&gt;
                          &lt;div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15"&gt;
                              &lt;img src="_pictures/15.png" alt="héhé" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Or, if you prefer : <a href="https://jsfiddle.net/m2Lnzr1m/" rel="nofollow">https://jsfiddle.net/m2Lnzr1m/</a></p>