CSSでコンテンツを編集可能なdivのスタイルを設定し、jQueryでrsize機能を追加するボタン

Question

現在、私はjQueryを使用してコンテンツ編集可能divのクローズ&ドラッグオプションを作成するコードを書いています。

$('.new-div').draggable({ 
    containment: "#bord", 
    create: function() { 
    $(".new-div").css("width",'auto'); 
    } , 
    drag: function() { 
    $(".new-div").css("width",'auto'); 
    } , 
    start: function() { 
    $(".new-div").css("width",'auto'); 
    } , 
    stop: function() { 
    $(".new-div").css("width",'auto'); 
    } 
}); 
$(document).on("click",".closeButton",function(){ 
    $(this).closest('div').remove(); 
}); 

このjsfiddle https://jsfiddle.net/felixtm/dwk6fs5w/を参照してください。これは機能しています。

しかし、私はdiv関数をクリックして関数にテキストを削除するコードを書くと、その閉じるボタンが消えます。これを解決するのを手伝ってください。

そのdivのtxtに応じてdivの幅を設定する方法を教えてください。

これはfiidle https://jsfiddle.net/felixtm/dwk6fs5w/5/

をJSご覧くださいそれから私はjQueryのを使用して、そのdiv要素のコンテンツのサイズを変更するためのコードを記述します。このコードも動作します。しかし私が必要なのは、下の図のようにdivの近くでフォントのサイズ変更ボタンを作る必要があるということです。 下の画像をご覧ください。ピクチャユーザに

右下に配置されているボタンを使用して、DIVをスケーリングすることによってDIV幅を増加させることによって、フォントサイズをリサイズすることができます。これを達成するためにお手伝いください。 ERとしてそれが新しいサイズ変更ボタンを使用してDIVため

がサイズ変更機能を追加した画像をクローズし、サイズを変更]ボタンをスタイリング

1. ：

   は、だからここに私は2つの要件があります。

ありがとうございます。

Answer 1

私が正しいとすれば、このようなものが必要ですか？

$('.new-div').draggable({ 
 
            containment: "#bord", 
 
            create: function() { 
 
            $(".new-div").css("width",'auto'); 
 
            } , 
 
            drag: function() { 
 
            $(".new-div").css("width",'auto'); 
 
            } , 
 
            start: function() { 
 
            $(".new-div").css("width",'auto'); 
 
            } , 
 
            stop: function() { 
 
            $(".new-div").css("width",'auto'); 
 
            } 
 
            }); 
 
     $(document).on("click",".closeButton",function(){ 
 

 
            $(this).closest('div').remove(); 
 
           }); 
 
            
 
     $(".new-div").on("click", function(){ 
 
         
 
        var uscontent= $(".new-div").text(); 
 
        
 
        if(uscontent.trim()==="message"){ 
 
        $(".new-div").text(''); 
 
         
 
         } }); 
 
         
 
     $("#font-size").on("change",function(){ 
 
        var v=$(this).val(); 
 
         $('.new-div').css('font-size', v + 'px'); 
 
        }); 
 
$('.resizeButton').draggable({ 
 
containment: '#bord', 
 
drag: function() { 
 
\t $('.new-div').height($('.resizeButton').position().top + 17); 
 
\t $('.new-div').width($('.resizeButton').position().left + 17); 
 
    $('.new-div').width($('.resizeButton').position().left + 17); 
 
    
 
\t $('.new-div').css({ 'font-size': ($('.new-div').height()/2.3)}); 
 

 
    
 
} 
 
})     

.new-div { 
 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 0px; right: 0px; top: 15px; border:2px solid black;} 
 
.parent-div { 
 
    max-width: 236px; width: 236px; position: relative; overflow: hidden; } 
 

 
.closeButton 
 
{ 
 
    display:block; 
 
    position:absolute; 
 
    top:-10px; 
 
    left:-10px; 
 
    width:27px; 
 
    height:27px; 
 
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center; 
 
} 
 
.resizeButton 
 
{ 
 
    display:block; 
 
    position:absolute; 
 
    bottom:-10px; 
 
    right:-10px; 
 
    width:27px; 
 
    height:27px; 
 
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center; 
 
    background-size: contain; 
 
    cursor: resize; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-sm-12"> 
 
    Font-size:<input type="range" min="12" max="120" id="font-size" /> 
 
    </div> 
 
    <br> 
 
    <div class="col-sm-12"> 
 
    <div class="parent-div"> 
 
    <div class="new-div" contenteditable="true"> 
 
    message 
 
    <a class="closeButton"><label hidden>.</label></a> 
 
    <a class="resizeButton"><label hidden>x</label></a> 
 
    </div> 
 
     <div class="bord" style="z-index: -1;"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg"> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div> 
 
    </div> 
 
</div>