html div無法同時顯示圖像和文本？

Question

我用jQuery拖拽元素和droppables工作，並想不通爲什麼它似乎是一個div我有，

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

似乎並沒有能夠在同一時間同時顯示圖像和文字。上面的div是我可以放棄的;我正試圖將圖像和文本拖到它。當我首先拖動圖像時，它們可以正常工作，但是一旦我嘗試拖動文本，圖像就不再顯示（儘管可放下的圖像確實已將圖像拖到那裏）。

這裏是我投擲的代碼，雖然我不知道這個問題是否在我的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將其添加到現有內容。