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

Question

我只是创建了一个 contenteditable div。它按我的预期工作正常，但我的问题是，我只是在页面加载时为 div 设置动画，然后进行编辑。在设置动画后，如果我编辑内容时 div 宽度大于实际文本。检查我的 fiddle :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 被拉伸(stretch)到这些值。

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

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

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