Question

我有一个漂浮在左边的div，还有一些环绕它的文本。

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

我希望我很清楚我想要实现的目标。如果将对象放在word文档中，文本可能会表现得像。

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

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

html / css中是否存在可能允许我想要的内容，或任何执行我所描述内容的插件。

由于

Answer 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移动。在小提琴中我也漂浮了图像，所以它几乎有点像看起来像你期望的那样。：）

Answer 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;
}

让文本围绕可由用户移动的对象

2 个答案: