Question

我为文本旋转，调整大小和文本拖动编写了一些代码。一开始就一切正常。请参阅此代码

＆＃13;

    $( '.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;
                  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

但是在文字旋转之后，这个问题就到了

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

Answer 1

旋转文字并进行编辑时，旋转图标和关闭图标会丢失。 这是因为它们相对于旋转内容定位。最简单的解决方法是将旋转的内容嵌入容器中，并将图标放在旋转的内容之外。

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

旋转并编辑文字后，div调整大小无法正常工作 这可能是由前面提到的浏览器没有正确理解旋转内容的子元素定位位置引起的。

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

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

以下内容可能对您有用。我还没有完全测试过这些，但初步测试在firefox中运行得很好。如果你想拥有多个容器，你需要稍微修改一下代码，因为假设只有一个元素带有给定的＆＃39; new-div＆＃39;上课。

https://jsfiddle.net/ye53kcre/

＆＃13;

    $('.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;
    });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用jquery旋转后其他元素的不当行为

1 个答案: