Question

我只是创建了一个满足的div.Its工作得很好，我的预期，但我的问题是，我只是在页面加载动画div，然后编辑。如果我编辑div宽度大于实际文本的内容动画后。检查我的小提琴：http://jsfiddle.net/Manivasagam/ux3k0t23/35/

我的css：

#content {  width: 210mm;
        min-height: 297mm;
        padding: 20mm;
        margin: 10mm auto;
        border: 1px GREEN solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

     @page {
        size: A4;
        margin: 0;

    }
    @media print {
        html, body {
            width: 210mm;
            height: 297mm;

        }
        #content {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
    }

我的jsp：

<div class='example' id="content">
<div id="editabledrag" contenteditable="false" style=" color:green; position: absolute;z-index:10000000;">Drag or double click and type!.</div>


</div>

我在哪里做错了？

Answer 1

您正在为页面加载时bottom设置动画。这样，css bottom仍然有效。

draggable更改了top。因此，当您拖动时，top和bottom都会设置。导致div被拉伸到那些值。

一种解决方法是在页面加载时仅动画top。或者，在动画将bottom重置为auto并相应更改top之后。像这样：

$('#editabledrag').animate({left:'150px',bottom:'150px'},function(){
    $(this).css({"top":$(this).offset().top,"bottom":"auto"})
});

http://jsfiddle.net/ux3k0t23/36/

拖动和编辑内容时div大小增加

1 个答案: