Question

我有一个名为“红色”的div。它显示用户在我的网页上发送的消息。问题是＆＃39; red＆＃39;只有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 For Duplication

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

所以基本上在发送消息后，重复的是“红色”消息。添加为下一条消息。我想避免“调整大小”。方法或＆＃39; autoflow＆＃39;。有什么建议吗？

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'content'添加一个名为'draggable'的额外div，在你的情况下就是消息。

使用动态内容动态复制div

1 个答案: