jQueryのドラッグ+：どのように

Question

をソート可能に追加する前に、ドラッグ可能な要素を変更する私は（mailchimpのような）ドラッグ&ドロップHTMLビルダーを作成しようとしていると私は表し、右に15枚の写真を持ってしたいと思いますhtmlコードをソート可能なリストにドロップします。しかし、ピクチャがソート可能なリストにドロップされると、ドラッグされたピクチャをhtmlコードで変更したいと思います。

https://jsfiddle.net/9r8h8y57/ありがとう：問題は、それはあなたがここに私のコードを見ることができます

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

...うまく動作しないということです。

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の答えです。

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

別のオプションは、単にピックアップオブジェクトを作成することです：あなたはその後、ちょうどあなたがしたいオブジェクトを呼び出すことができます

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

：グローバル空間では、私のようなオブジェクトを作成助言しますヘルパー。私は最近、若干関連性の高い質問がありました：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" 
    }); 
});