我写了一些代码用于文本旋转,调整大小和文本拖动.一开始就一切正常.请参阅此代码

    $( '.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= $(this).text();
             if(uscontent.trim()==="Add Your Text"){
                                   $('.mc').text('');
                                   $(this).css("width","100px");
                                   $(this).css("height","6%");
                                           }                    
                           });
      
      $('.resizeButton').draggable({
      containment: '#bord',
      drag: function() {
        $('.new-div').height($('.resizeButton').position().top + 17);
        $('.new-div').width($('.resizeButton').position().left + 17);
        $('.new-div').width($('.resizeButton').position().left + 17);

        $('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});


      }
      });                     
       
                var rotation = 0;
                var rotating = false;
                var startX = 0;

                jQuery.fn.rotate = function(degrees) {
                    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
                   };

                $(document).mousemove(function(e){
                  
                   if (!rotating) return;
                   rotation = startX - e.clientX;
                   $('.new-div').rotate(rotation);      
                   });

                $(document).on("mouseup", function(){
                   rotating = false;
                  });

                $('.rotateButton').on("mousedown", function(e) {
                     e.stopImmediatePropagation();
                    rotating = true;
                    startX = e.clientX;
                  });

.new-div { 
    z-index: 1; 
    position: absolute; 
    width: auto;
    word-break: break-all; 
    text-align: center; 
    left: 30%;
    top: 55px; 
    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;
}
.rotateButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:82px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true">
      <span data-scale-ratio="1" class="mc"  data-scale-reference="new-div">
   Add Your Text
    </span>
     <a class="closeButton"></a>
     <a class="rotateButton"></a>
     <a class="resizeButton"></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>

https://jsfiddle.net/felixtm/jaboLc3u/20/

但在文本轮换后,这个问题就到了

>旋转文本并进行编辑时,旋转图标和关闭图标丢失.
>有些时候文字出现在边框之外
>旋转并编辑文本后,div调整大小不起作用
>调整大小按钮,关闭按钮远离边框
>有时网页警报无响应的脚本正在运行
请帮助解决这些问题.

最佳答案 旋转文本并进行编辑时,旋转图标和关闭图标丢失.

这是因为它们相对于旋转内容定位.最简单的解决方法是将旋转的内容嵌入容器中,并将图标放在旋转内容之外.

有些时候文字出现在边框之外.
字体的大小与容器的高度无关.此外,您无法在不更改字体大小的情况下知道文本的最终高度.我建议根据容器动态填充字体大小,而不是假设容器的高度与所需的字体大小相关.

旋转和编辑文本后,div调整大小不起作用
这可能是由于前面提到的浏览器没有正确理解在何处定位旋转内容的子元素引起的.

调整大小按钮,关闭按钮远离边框
可能与第一期有关

有时网页正在警告无响应的脚本正在运行
您应该将jQuery结果存储在变量中或链接查询以避免重新执行选择器.

以下内容可能对您有用.我还没有完全测试过这些,但初步测试在firefox中运行得很好.如果你想拥有多个容器,你需要稍微修改一下代码,因为假设只有一个元素附加了给定的’new-div’类.

https://jsfiddle.net/ye53kcre/

    $('.container').draggable({
      containment: "#bord"
    });

    $(document).on("click", ".closeButton", function() {
      $(this).closest('div').remove();
    });

    $(document).on("click", ".new-div", function() {
      $(this).focus();
    });

    $('.resizeButton').draggable({
      containment: '#bord',
      drag: function() {
        var pos = $(this).position();
        $(this).closest('.container')
          .height(pos.top + 17)
          .width(pos.left + 17);

        $('.new-div').resizeFontToFillParent();
      }
    });

    var rotation = 0;
    var rotating = false;
    var startX = 0;

    $.fn.resizeFontToFillParent = function() {
      return this.each(function() {
        var containerHeight = $(this).parent().height();
        var $el = $(this).css('font-size', '');
        var fontSize = parseInt($el.css('font-size')) || 12;
        while ($el.height() < containerHeight) {
          $el.css('font-size', fontSize++);
        }
      });
    };

    $(document).mousemove(function(e) {
      if (rotating) {
        rotation = startX - e.clientX;
        $('.new-div').css({
          'transform': 'rotate(' + rotation + 'deg)'
        });
      }
    });

    $(document).on("mouseup", function() {
      rotating = false;
    });

    $('.rotateButton').on("mousedown", function(e) {
      e.stopImmediatePropagation();
      e.preventDefault();

      rotating = true;
      startX = e.clientX;
    });

.new-div {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  text-align: center;
}

.container {
  z-index: 1;
  position: absolute;
  display: inline-block;
  left: 30%;
  top: 55px;
  width: 100px;
  height: 30px;
  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;
}

.rotateButton {
  display: block;
  position: absolute;
  top: -10px;
  left: 82px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="col-sm-12">
  <div class="parent-div">
    <div class="container">
      <div class="new-div" contenteditable="true" tabindex="0">
        Add Your Text
        <a class="rotateButton"></a>
      </div>
      <a class="closeButton"></a>
      <a class="resizeButton"></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>