让文本围绕用户可以移动的对象流动答案

【问题标题】：Have text flow around an object that can be moved by the user让文本围绕用户可以移动的对象流动
【发布时间】：2013-04-21 20:47:01
【问题描述】：

我有一个向左浮动的 div，以及一些环绕它的文本。

我希望能够使用 javascript 上下移动 div。当我这样做时，我希望文本围绕它流动（根据需要在其上方和下方）。

我希望很清楚我想要达到的目标。类似于将对象放置在 Word 文档中时文本的行为方式。

我已经对其进行了一些研究，我得出的结论是，只有当 div 包含在与文本相同的父元素中时才有可能。如果要上下移动 div，则必须移动其在文本中的位置（例如，从后面取一个句子并将其移动到前面）。

像给它一个上边距这样的事情只是扩展了文本必须围绕的块，并使其位置相对意味着文本围绕其原始位置流动，并且相对定位的 div 与文本重叠。这一切都很有道理，但很难实现我想要的。

html/css 中是否有任何内容可以满足我的需求，或者任何插件可以满足我的描述。

谢谢

【问题讨论】：

可能很有趣：stackoverflow.com/q/7601378/983992

标签： javascript html css css-float

【解决方案1】：

Marcels 链接实际上很有趣。

我可能很想捏造它并得到一个接近的近似值，因为它很简单，可以让你成功。

http://jsfiddle.net/tromm/e3YHb/

var img = $('#whale');
var nextP = img.next();
var previousP = img.prev();

$('#move-down').click(function() {
    nextP = img.next();
    img.detach();
    img.insertAfter(nextP)
});

$('#move-up').click(function() {
    previousP = img.prev();
    img.detach();
    img.insertBefore(previousP)
});

本质上是通过 s 移动。在小提琴中，我还浮动了图像，所以它看起来几乎有点像你期望的那样。 :)

【讨论】：

谢谢。看起来我将不得不做类似的事情。

【解决方案2】：

这就是我正在做的事情（如果它对任何人有用的话）。它尝试通过文本移动元素，检查 offsetTop 以查看它何时实际移动到新行（我只做了向下运动）。然后我会继续弄清楚如何在拖动元素时多次调用它。为我需要的东西付出了太多的努力（我必须考虑元素中的元素），而且看起来它总有一天会出现在 html 中，所以我会接受 Tom 的解决方案。

function down(el) {
    var parentDiv = el.parentNode;
    var next = el.nextSibling;
    var prev = el.previousSibling;
    var match, word;

    var offset = el.offsetTop;

    while ((match = /^\s*\S+\s*/.exec(next.nodeValue)) !== null && el.offsetTop === offset) {
    word = match[0];

    if (prev === null) {
        prev = parentDiv.insertBefore(document.createTextNode(''), el);
    }

    prev.nodeValue += word;
    next.nodeValue = next.nodeValue.substring(word.length);
    }

    if (el.offsetTop !== offset) {
    return;
    }

    var nextDiv = findNextDiv(parentDiv);

    if (nextDiv === null) {
    return;
    }

    parentDiv.removeChild(el);

    if (nextDiv.firstChild === null) {
    nextDiv.appendChild(el);
    }
    else {
    nextDiv.insertBefore(el, nextDiv.firstChild);
    if (el.offsetTop === offset) {
        down(el);
    }
    }
}

function findNextDiv(el) {
    var next;
    while ((next = el.nextSibling) !== null) {
    if (next.tagName === 'DIV') {
        return next;
    }
    el = next;
    }
    return null;
}

【讨论】：