javascript - 使用动态内容动态复制 div

Question

我有一个名为“red”的 div，它显示用户在我的网页上发送的消息。问题是“red”只有 40px 长，而且消息通常会通过 div。我想在发送消息后在网页上添加另一个“红色”div 副本，这样消息就不会超出 div 边界。

<form action="action_page.php">  <!-- Message created here -->
<input type="text" name="userinput" value="message">
<br>
<input type="submit" value="Submit">
</form>

<div id="red"></div> <!--- Messages shown here -->

用于复制的 JS

var i = 0;

function duplicate() {
    var original = document.getElementById('red' + i);
    var clone = original.cloneNode(true); // "deep" clone
   clone.id = "red" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

所以基本上在发送消息后，会为下一条消息添加重复的“红色”。我想避免使用“resize”方法或“autoflow”。有什么建议吗？

Answer 1

基本上，您要做的是为发送的每条消息扩展 div。这是一个完美的例子 http://jsfiddle.net/F4bxA/32/

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
    p = p + 75;
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'draggable' + i);
    newdiv.style.position = "absolute";
    newdiv.style.top = +p + "px";
    newdiv.style.left = "20px";
    newdiv.style.border = '1px solid #000';
    newdiv.style.display = 'inline-block';
    newdiv.style.width = '75px';
    newdiv.style.height = '75px';
    newdiv.innerHTML = "draggable inner div";
    document.getElementById("content").appendChild(newdiv);

    var g = $('#draggable' + i);
    var o = $('#content');
    g.draggable({
        constraint: "#content",
        drag: function (event, ui) {
            if (g.position().top > o.height() - g.height()) {
                o.height(o.height() + 5);
                return true;
            }           
        },

        scroll: false
    });
    $("#content").height(o.height()+g.height());
});

代码的作用是为 div“内容”添加一个名为“可拖动”的额外 div，在您的情况下，这将是消息。