2

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

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

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

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

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

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

谢谢

4

2 回答 2

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

于 2013-04-22T11:56:56.510 回答
0

这就是我正在研究的（如果它对任何人有用的话）。它试图通过文本移动元素，检查 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;
}
于 2013-04-24T11:09:35.323 回答