1

サイズを変更したい編集可能なテキスト ブロックがあります。その中にハンドルを配置すると、要素が編集可能であり、編集中にユーザーがハンドルを削除できることを除いて、すべてが完璧に機能します。

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
           <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
           <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
           <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
           <div class="ui-resizable-handle ui-resizable-se se handle"></div>
        </div>  
    </div>
</div>

http://jsfiddle.net/3Ve4U/154/

親 div にハンドルを配置しようとすると、要素のサイズがまったく変更されません。

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
        </div>  
        <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
        <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
        <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
        <div class="ui-resizable-handle ui-resizable-se se handle"></div>
    </div>
</div>

http://jsfiddle.net/3Ve4U/155/

助言がありますか?

4

1 に答える 1

1

変更してみてください:

   .editable-text {
    min-width: 50px;
    max-width:400px;
    min-height: 18px;
    position: absolute;    
}

確認してください:http://jsfiddle.net/3Ve4U/157/

于 2013-05-22T08:31:47.200 に答える