使用重新调整可编辑文本在Div中移动图像

Question

我希望能够在同一个屏幕上移动图像并输入div，并在移动时让文本环绕图像。到目前为止，我已经能够做到这一点：

http://jsfiddle.net/uk6DA/

但是当移动图像时，文本不会改变其位置。当图像移动时，文本如何重新调整？

Answer 1

我认为这一切都与DOM中的位置有关。

如果你认真对待这样的事情，我认为你必须在移动它时找到元素所在的位置，然后根据它改变它在DOM中的位置。您可能也想将文本放在元素中。

因此，在开头，#typer位于文本之前。但是当你移动它时，你将不得不做几件事。你必须看到#typer左边和上边的位置，以及它们位于上面的文字。然后，你必须进行计算，以便在DOM中修改它们。

我猜你要么必须在文本中添加一堆span或div，以便能够适当地重新创建文本，以适应元素。这也会有点困难，因为长度不固定，它们是动态的。如果文本位于div或span内，您将无法将“环绕”放到页面的一侧，它将直接落到该元素中的下一行。

初始设置

运动后

这应该解释你将如何拆分它们。它可能变得非常复杂，但你可以做到。你只需要处理不同类型的测量。我过去做的事与此非常相似。

基本上，只需跟踪分割文本的位置（这就是为什么它们按顺序排列ID），这样您就可以加入它们。测量文本占用的空间，图像占用的空间以及可以使用的画布区域的大小。

从那里，你应该很好地衡量该做什么。如果文本溢出，请确保文本不会中断到下一行。如果发生这种情况，它就会破坏并破坏幻觉。

因此，就DOM中的位置而言：

初始设置

<div id="typer">
    <img id="img" />
    <div class="text"> ..... </div>
</div>

运动后

<div id="typer">
    <div class="text" id="text1"> ... </div>
    <div class="text" id="text2"> ... </div>
    <div class="text" id="text4"> ... </div>
    <div class="text" id="text6"> ... </div>
    <div class="text" id="text8"> ... </div>
    <img id="img" />
    <div class="text" id="text3"> ... </div>
    <div class="text" id="text5"> ... </div>
    <div class="text" id="text7"> ... </div>
    <div class="text" id="text9"> ... </div>
    <div class="text" id="text10"> ... </div>
</div>

这也是为CSS设置它的“最简单”的路线，除非你position: absolute;一切都可以工作。

Answer 2

单词没有坐标，所以你必须用html标签包装每个单词。显然这会增加很多文本。

http://meindesign.net/tools/running_text.php

这是您需要的最佳示例。

我不知道这是如何工作的......但你也可能想看看这个

http://www.jwf.us/projects/jQSlickWrap/

祝你好运。

Answer 3

你有没有试过＆＃34; resized＆＃34; img div和里面的文字？

你可以漂浮：左; img和右边的文字。放置一个最小宽度，以避免它太小。