jQuery的可拖動+排序：如何更改拖動元素之前追加到可排序

Question

我試圖做一個拖&降HTML生成器（如mailchimp），我想對代表權15張圖片html代碼並將它們放在可排序的列表中。但是，當圖片被刪除到可排序列表時，我想更改HTML代碼中的拖動圖片。問題是，它不能很好地工作......

<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> 

你可以看到我的代碼在這裏：https://jsfiddle.net/9r8h8y57/

謝謝。

Answer 1

我做了這樣的事情最近，我對圖像的ID，所以我知道發生了什麼被丟棄，並基於該都挺過來了我只是在說我想

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

的HTML附加的ID不知道這是否有幫助，但它是另一種方式！我有可以在那裏下架，但可以排序的工作也一樣。

Answer 2

擴大Scannerz的答案。在全球空間，我會建議創建類似於對象：

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") 
} 

然後，你可以調用這個對象，你想：

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

另一種選擇是簡單地創建爲拿起當對象幫手。我最近有一個相關的問題：https://jsfiddle.net/Twisty/Lbu7ytbj/其中，助手必須是一組多個項目。

爲您的使用情況下，我們創建一個函數來追加正確的事情：

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" 
    }); 
});