html divは画像とテキストを同時に表示できません。

Question

私はjQueryのdraggablesとdroppablesで働いています、そして私が持っているのdiv、

<li class="ui-widget-header"><img style="position: relative; left: 10px; top: 50px;" src=""></img></li> 

が同時に画像とテキストの両方を表示できるようではありません。表示された理由を把握することはできません上記のdivは私のdroppableです。私はそれに画像とテキストの両方をドラッグしようとしています。最初に画像をドラッグすると正常に動作しますが、一旦テキストをドラッグしようとすると、画像は表示されなくなります（ただし、画像がドラッグされていることをドロップブルが認識します）。私は、問題は私のhtmlまたはこのから何かに由来するかどうかはわからないが、ここで

は、私のドロップ可能なコードである（注：「李」は上記ドロップ可能です）：

drop: function(event,ui) { 
       if (ui.draggable.find("img").length) { 
        $(this) 
         .addClass("ui-state-highlight"); 
        $("img", this).attr("src", ui.draggable.find("img").attr("src")); 
       } else { 
        $(this) 
         .addClass("ui-state-highlight") 
          .text(ui.draggable.text()); 
       } 
} 

任意の提案感謝されます。ありがとう！

Answer 1

これはあなたのJavascriptコードのためです。テキストドロップでは、<li>タグの.text値をドラッグしたテキストに設定します。このテキストは、そこにある<img>タグを上書きします。 <li>にあるものにテキストを追加するだけですか？

この変更は、あなたの画像の下に含まれるテキストとともに新しい段落を追加する必要があります。明らかに、段落を自由に変更することができます。

 } else { 
      $(this) 
       .addClass("ui-state-highlight") 
        .append('<p>' + ui.draggable.text() + '</p>'); 
     } 

Answer 2

$(this).text(...);は、liの内容に置き換えます。代わりに、appendを使用して既存のコンテンツに追加します。