使用jQuery旋转后其他元素的不当行为 [英] Misbehaviour of other element after using jquery rotation

查看：54
本文介绍了使用jQuery旋转后其他元素的不当行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我为文本旋转，调整大小和拖动文本编写了一些代码.起步时一切正常.请查看此代码

     $( '.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/

但是在文本旋转之后，这个问题就出现了

  1. 旋转文本并进行编辑时，缺少旋转图标和关闭图标.

  2. 有些时候文本超出了边框

  3. 旋转并编辑文本后，div调整大小无效

  4. 调整大小"按钮，关闭"按钮距离边框较远

  5. 某些时候网页正在警告无响应的脚本正在运行 请帮助解决这些问题.

解决方案

旋转文本并进行编辑时，缺少旋转图标和关闭图标. 这是因为它们是相对于旋转内容定位的.最简单的解决方法是将旋转后的内容嵌入到容器中，然后将图标放置在旋转后的内容之外.

某些时间文本超出了边框. 字体大小与容器的高度无关.此外，不更改字体大小就无法知道文本的最终高度.我建议根据容器动态填充字体大小，而不是假设容器的高度与所需的字体大小有关.

旋转并编辑文本后，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>

I write some code for text rotate , resize and text drag . Everything is working fine on the starting . Please see this code 

    $( '.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/

But after text rotate this problems are arrived

  1. Rotate icon and close icon is missing when we rotate the text and edit it .

  2. Some time text is going outside the border box

  3. After rotate and edit text then div resize is not working

  4. Resize button, close button is going far from the border box

  5. Some time webpage is alerting unresponsive script is running Please Help to solve these issues .

解决方案

Rotate icon and close icon is missing when we rotate the text and edit it. This is because they are positioned relative to rotated content. The easiest fix is to embed the rotated content in a container and position your icons outside of the rotated content.

Some time text is going outside the border box. The size of your font is not related to the height of the container. Additionally, you cannot know the resulting height of your text without changing the font size. I would recommend dynamically filling the font size based on the container instead of assuming the height of the container is related to the desired font size.

After rotate and edit text then div resize is not working This could be caused by the previously mentioned issue of the browser not properly understanding where to position child elements of rotated content.

Resize button, close button is going far from the border box Possibly related to the first issue

Some time webpage is alerting unresponsive script is running You should either store jQuery results in a variable or chain your queries to avoid having to reexecute the selector.

The following may work for you. I haven't fully tested any of this, but preliminary tests work well enough in firefox. If you wish to have multiple containers, you'll need to modify the code a bit, as it is assuming there is only one element with the given 'new-div' class attached.

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>

这篇关于使用jQuery旋转后其他元素的不当行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆