jQuery ziehbar + sortierbar: wie das ziehbar Element zu ändern, bevor append sortierbar

Question

Ich versuche, ein Drag & Drop HTML-Builder zu machen (wie MailChimp) und ich möchte 15 Bilder auf der rechten Seite haben, die darstellen html code und lassen Sie sie auf einer sortierbaren Liste. Aber wenn das Bild in der sortierbaren Liste abgelegt wird, möchte ich das gezogene Bild in einem HTML-Code ändern. Das Problem ist, dass es nicht gut funktioniert ...

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 

    <style> 
     .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; 
     } 
    </style> 

    <script> 
     $(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" 
       }); 
      }); 
     }); 
    </script> 

    <div id="wrap" style="width:1000px;margin:auto"> 
     <div id="petit_div"> 
      <div class="bloc" id="1" data-id="1" style="display:none">Ceci est le div 1</div> 
      <div class="bloc" id="2" data-id="2" style="display:none">Ceci est le div 2</div> 
      <div class="bloc" id="3" data-id="3" style="display:none">Ceci est le div 3</div> 
      <div class="bloc" id="4" data-id="4" style="display:none">Ceci est le div 4</div> 
      <div class="bloc" id="5" data-id="5" style="display:none">Ceci est le div 5</div> 
      <div class="bloc" id="6" data-id="6" style="display:none">Ceci est le div 6</div> 
      <div class="bloc" id="7" data-id="7" style="display:none">Ceci est le div 7</div> 
      <div class="bloc" id="8" data-id="8" style="display:none">Ceci est le div 8</div> 
      <div class="bloc" id="9" data-id="9" style="display:none">Ceci est le div 9</div> 
      <div class="bloc" id="10" data-id="10" style="display:none">Ceci est le div 10</div> 
      <div class="bloc" id="11" data-id="11" style="display:none">Ceci est le div 11</div> 
      <div class="bloc" id="12" data-id="12" style="display:none">Ceci est le div 12</div> 
      <div class="bloc" id="13" data-id="13" style="display:none">Ceci est le div 13</div> 
      <div class="bloc" id="14" data-id="14" style="display:none">Ceci est le div 14</div> 
      <div class="bloc" id="15" data-id="15" style="display:none">Ceci est le div 15</div> 
     </div> 

     <div id="left"> 

     </div> 

     <div id="right" > 
      <table width="100%" style="text-align:center;height:100%"> 
      <tbody> 
       <tr style="height:133px"> 
        <td> 
         <div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1" alt="alt_div_image_1"> 
          <img src="_pictures/1.png" alt="héhé" data-id="1"/> 
         </div> 
        </td> 
        <td> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2"> 
          <img src="_pictures/2.png" alt="héhé" data-id="2"/> 
         </div> 
        </td> 
        <td> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3"> 
          <img src="_pictures/3.png" alt="héhé" data-id="3"/> 
         </div> 
        </td> 
       </tr> 

       <tr style="height:133px"> 
        <td> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4"> 
          <img src="_pictures/4.png" alt="héhé" data-id="4"/> 
         </div> 
        </td> 
        <td> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5"> 
          <img src="_pictures/5.png" alt="héhé" data-id="5"/> 
         </div> 
        </td> 
        <td> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6"> 
          <img src="_pictures/6.png" alt="héhé" data-id="6"/> 
         </div> 
        </td> 
       </tr> 

       <tr style="height:133px"> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7"> 
          <img src="_pictures/7.png" alt="héhé" data-id="7"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8"> 
          <img src="_pictures/8.png" alt="héhé" data-id="8"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9"> 
          <img src="_pictures/9.png" alt="héhé" data-id="9"/> 
         </div> 
        </td> 
       </tr> 

       <tr style="height:133px"> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10"> 
          <img src="_pictures/10.png" alt="héhé" data-id="10"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11"> 
          <img src="_pictures/11.png" alt="héhé" data-id="11"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12"> 
          <img src="_pictures/12.png" alt="héhé" data-id="12"/> 
         </div> 
        </td> 
       </tr> 

       <tr style="height:133px"> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13"> 
          <img src="_pictures/13.png" alt="héhé" data-id="13"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14"> 
          <img src="_pictures/14.png" alt="héhé" data-id="14"/> 
         </div> 
        </td> 
        <td class="my_td_parent"> 
         <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15"> 
          <img src="_pictures/15.png" alt="héhé" data-id="15"/> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

Sie meinen Code hier sehen können: https://jsfiddle.net/9r8h8y57/

Danke.

Answer 1

habe ich so etwas wie dies vor kurzem hatte ich IDs auf die Bilder so wusste ich, was fallen gelassen wurde, und auf der Grundlage der Kennung, kam durch ich gerade auf der HTML-Anhängen, die ich

 $('.droppable').droppable({ 
     drop: function(event, ui) { 
      id = $(ui.draggable).attr('id'); 
      switch(id){ 
       case '1': 
        $('#container').append('*html*'); 
        break; 
      } 
     }, 
    }); 

gesucht Nicht sicher, ob das überhaupt hilft, aber es ist eine andere Art, es zu tun! Ich habe dort zwar deponiert, aber sortierbar würde gleich funktionieren.

Answer 2

Erweitern nach Scannerz 's Antwort. Im globalen Raum, würde ich raten, wie ein Objekt zu erstellen:

var html = { 
    1: $("<div>", { id: 1, class: 'bloc', data-id: 1}).html("Ceci est le div 1"), 
    2: $("<div>", { id: 2, class: 'bloc', data-id: 2}).html("Ceci est le div 2"), 
    n: $("<div>", { id: n, class: 'bloc', data-id: n}).html("Ceci est le div n") 
} 

können Sie dann rufen Sie einfach das gewünschte Objekt:

$('#container').append(html[$(ui.draggable).attr('id')]); 

Eine andere Möglichkeit ist, einfach das Objekt zu erstellen, wenn sie als die aufgenommenen Helfer. Ich hatte kürzlich eine etwas relevante Frage: https://jsfiddle.net/Twisty/Lbu7ytbj/ Darin musste der Helfer eine Gruppe von mehreren Gegenständen sein.

Für Ihren Anwendungsfall erstellen wir eine Funktion, das Richtige hängen:

https://jsfiddle.net/Twisty/nfz2qwp1/1/

$(function() { 
    $("#left").sortable({ 
    revert: true, 
    axis: "y", 
    update: function(e, ui) { 
     if (!ui.item.hasClass("new")) { 
     return true; 
     } 
     var newBloc = $("<div>", { 
     id: ui.item.data("id").length ? ui.item.data("id") : $("#left .bloc").length + 1, 
     class: ui.item.attr("class") 
     }).data({ 
     id: ui.item.data("id"), 
     type: ui.item.data("type") 
     }).html("Ceci est le div " + ui.item.data("id")); 
     ui.item.remove(); 
     newBloc.removeClass("new"); 
     $("#left").append(newBloc); 
    } 
    }).disableSelection(); 
    $("#right .my_div").draggable({ 
    connectToSortable: "#left", 
    helper: "clone", 
    revert: "invalid" 
    }); 
});