jQuery UI：ドラッグ中にクローン要素が表示されない

Question

2つのdivを作成して、最初のdivのクローンを2番目のdivにドラッグアンドドロップしたいとします。問題は、私がそれをドラッグしている間にクローンが消えることですが、一度それが2番目のdivにドロップされると表示されます。

htmlコード：

<div id="green" class="editable"></div> 
<div id="container"></div> 

のjQueryコード：事前に

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

ありがとう：また

$(document).ready(function(){ 
      $(".editable").draggable({helper:'clone'}); 
      $(".editable").resizable(); 

      $("#container").droppable({ 
       drop: function(event,ui){ 
         $(this).append($(ui.draggable).clone()); 
       } 
      }); 
}); 

、私は頭のセクションで、以下を含みます。

Answer 1

すべてのスタイルは元の要素のIDに設定されています。
要素を複製すると、スタイルは適用されません。それが消えたと思う理由です。実際には、デフォルトの背景色を取得するだけで透明です。
は、私はあなたのコードはokです、ちょうどあなたのDIV #greenと#containerと.editableのためのCSSを調整class="green"

$(document).ready(function(){ 
 
     $(".editable").draggable({helper:'clone'}); 
 
     $(".editable").resizable(); 
 

 
     $("#container").droppable({ 
 
      drop: function(event,ui){ 
 
       $(this).append($(ui.draggable).clone()); 
 
      } 
 
     }); 
 
    });

 .green { 
 
      width:100px; 
 
      height:100px; 
 
      background-color:green; 
 
     } 
 

 
     #container { 
 
      width:500px; 
 
      height:500px; 
 
     }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="editable green"></div> 
 
<div id="container" style = 'background-color:red;'></div>

Answer 2

にごid="green"を変更することに注意してください。あなたのDIV'sは見えないので。

<div id="green" class="editable"></div> 
<div id="container"></div>