title: jQuery draggable+sortable: how to change the draggable element before append to sortable
body: <p>I'm trying to make a <strong>drag&amp;drop html builder (like mailchimp)</strong> and I would like to have 15 <strong>pictures on the right that represent html code</strong> and drop them on a sortable list. But when the picture is dropped to the sortable list I want to change the dragged picture in an html code. The problem is that it doesn't work well ... </p>
  
  <pre><code>    &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;style&gt;
          .bloc{height:200px;width:400px;border: 2px solid green;}
          #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,
                      axis: "y",
                      receive: function(e,ui){
                          var myDataId= $(ui.item).attr("data-id");
  
                          alert(ui.item[0]);
                          alert($("#left").children().attr("alt"));
                          $("#left ui.item").replaceWith($("#petit_div .bloc[data-id="+ myDataId +"]").show());
                          alert(myDataId);
  
                          //$(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
                          /*
                          var dropElementDataId = $(ui.item.parent).attr("data-id");
                          alert(ui.item.parent().attr("data-id"));
                          $(ui.item).replaceWith("$(.bloc[data-id="+ dropElementDataId +"])");
                          */
                      }
                  }).disableSelection();
              }); 
              $(function(){
                  $(".my_div").children().draggable({
                      connectToSortable: "#left",
                      helper: "clone",
                      revert: "invalid"
                  });
              });
          }); 
      &lt;/script&gt;
  
      &lt;div id="wrap" style="width:1000px;margin:auto"&gt; 
          &lt;div id="petit_div"&gt;
              &lt;div class="bloc" id="1" data-id="1" style="display:none"&gt;Ceci est le div 1&lt;/div&gt;
              &lt;div class="bloc" id="2" data-id="2" style="display:none"&gt;Ceci est le div 2&lt;/div&gt;
              &lt;div class="bloc" id="3" data-id="3" style="display:none"&gt;Ceci est le div 3&lt;/div&gt;
              &lt;div class="bloc" id="4" data-id="4" style="display:none"&gt;Ceci est le div 4&lt;/div&gt;
              &lt;div class="bloc" id="5" data-id="5" style="display:none"&gt;Ceci est le div 5&lt;/div&gt;
              &lt;div class="bloc" id="6" data-id="6" style="display:none"&gt;Ceci est le div 6&lt;/div&gt;
              &lt;div class="bloc" id="7" data-id="7" style="display:none"&gt;Ceci est le div 7&lt;/div&gt;
              &lt;div class="bloc" id="8" data-id="8" style="display:none"&gt;Ceci est le div 8&lt;/div&gt;
              &lt;div class="bloc" id="9" data-id="9" style="display:none"&gt;Ceci est le div 9&lt;/div&gt;
              &lt;div class="bloc" id="10" data-id="10" style="display:none"&gt;Ceci est le div 10&lt;/div&gt;
              &lt;div class="bloc" id="11" data-id="11" style="display:none"&gt;Ceci est le div 11&lt;/div&gt;
              &lt;div class="bloc" id="12" data-id="12" style="display:none"&gt;Ceci est le div 12&lt;/div&gt;
              &lt;div class="bloc" id="13" data-id="13" style="display:none"&gt;Ceci est le div 13&lt;/div&gt;
              &lt;div class="bloc" id="14" data-id="14" style="display:none"&gt;Ceci est le div 14&lt;/div&gt;
              &lt;div class="bloc" id="15" data-id="15" style="display:none"&gt;Ceci est le div 15&lt;/div&gt;
          &lt;/div&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" alt="alt_div_image_1"&gt;
                              &lt;img src="_pictures/1.png" alt="héhé" data-id="1"/&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é" data-id="2"/&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é" data-id="3"/&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é" data-id="4"/&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é" data-id="5"/&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é" data-id="6"/&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é" data-id="7"/&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é" data-id="8"/&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é" data-id="9"/&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é" data-id="10"/&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é" data-id="11"/&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é" data-id="12"/&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é" data-id="13"/&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é" data-id="14"/&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é" data-id="15"/&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>You can see my code here : <a href="https://jsfiddle.net/9r8h8y57/" rel="nofollow">https://jsfiddle.net/9r8h8y57/</a></p>
  
  <p>Thank you.</p>