Question

我正在使用jquery draggables和droppables，并且无法弄清楚为什么它看起来像我有一个div，

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

似乎无法同时显示图像和文本。上面的div是我的辍学者;我试图将图像和文本拖到它。当我首先拖动图像时，它们工作正常，但是一旦我尝试拖动文本，图像就不再显示了（尽管可放置的图像确认图像被拖到那里）。

这是我的可删除代码，虽然我不确定问题是源于我的html中的内容还是来自此内容（注意：上面的'li'是droppable）：

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

$(this).text(...);将替换li的内容。而是使用append将其添加到现有内容中。

Answer 2

这是因为你的Javascript代码。在文字删除时，您将<li>标记的.text值设置为拖动的文字，这会覆盖您在那里的<img>标记。您是否只想将此文本附加到<li>然后的任何内容？

以下更改为您的其他区块应附加一个新段落，其中包含图片下方的文字。显然，随意将段落更改为您想要的任何内容。

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

html div不能同时显示图像和文字？

2 个答案: