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

问题描述

我写了一些代码文本旋转，调整大小和文本拖动。一切都在工作良好的开始。请查看此代码

  $（'.new-div'）。draggable （{containment：#bord，create：function（）{$（。new-div）。css（width，'auto'）;}，drag：function（）{$（ div）。css（width，'auto'）;}，start：function（）{$（。new-div）。 ）{$（。new-div）。css（width，'auto'）;}}）; $（document）.on（click，。closeButton，function（）{$（this）.closest（'div'）。 $（'。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 17）; $（'。new-div'）。width（$（'。resizeButton'）。position（）。left + 17）; $（'。new-div'）。width（$。'resizeButton' ）.position（）。left + 17）; $（'。new-div'）。css（{'font-size'：（$（'。new-div'）。 }}）; var rotation = 0; var rotate = false; var startX = 0; jQuery.fn.rotate = function（degrees）{$（this）.css（{'transform'：'rotate（'+ degrees +'deg）'}）; }; $（document）.mousemove（function（e）{if（！rotation）return; rotation = startX  -  e.clientX; $（'。new-div'）。 $（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;左：30％; top：55px; border：2px solid black; } .parent-div {max-width：236px; width：236px;位置：相对; 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'）无重复中心; background-size：包含; 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;}  

< pre class =snippet-code-html lang-html prettyprint-override> < 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-divcontenteditable =true> < span data-scale-ratio =1class =mcdata-scale-reference =new-div>添加您的文本< / span> < a class =closeButton>< / a> < a class =rotateButton>< / a> < a class =resizeButton>< / a> < / div> < div class =bordstyle =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/

但在文字旋转后

/ li>

一些时间文字在边框外面

旋转和编辑文字后，

调整大小按钮，关闭按钮远离边框框

时间网页正在警告无响应脚本正在运行
请帮助解决这些问题。

解决方案

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

一些时间文本超出边框框。
字体的大小与容器的高度无关。此外，您不能知道您的文本的结果高度，而不更改字体大小。我建议基于容器动态填充字体大小，而不是假定容器的高度与所需的字体大小相关。

旋转和编辑后text then div resize is not working
这可能是由于前面提到的浏览器未正确理解旋转内容的子元素位置的问题造成的。

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

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

以下内容可能适用于您。我没有完全测试任何这一点，但初步测试工作够好在firefox。如果你想有多个容器，你需要修改代码，因为它假设只有一个给定的'new-div'类附加的元素。

https://jsfiddle.net/ye53kcre/

  $（'。container'）。draggable（{containment：#bord}）; $（document）.on（click，.closeButton，function（）{$（this）.closest（'div'）。 $（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 rotate = false; var startX = 0; $ .fn.resizeFontToFillParent = function（）{return this.each（function（）{var containerHeight = $（this）.parent（）。height（）; var $ el = $（this）.css ';''）; var fontSize = parseInt（$ el.css（'font-size'））|| 12; while（$ el.height（）< containerHeight）{$ el.css（'font-size' ，fontSize ++）;}}）; }; $（document）.mousemove（function（e）{if（rotation）{rotation = startX  -  e.clientX; $（'。new-div'）。css（{'transform'：'rotate 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;左：0; width：100％; word-break：break-all; text-align：center;}。container {z-index：1; position：absolute; display：inline-block;左：30％; top：55px; width：100px; height：30px; border：2px solid black;}。parent-div {max-width：236px; width：236px;位置：相对; 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'）无重复中心; background-size：包含; 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;}  

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://code.jquery.com/ui/111.1/jquery-ui.min .js>< / script>< div class =col-sm-12> < div class =parent-div> < div class =container> < div class =new-divcontenteditable =truetabindex =0>添加您的文字< a class =rotateButton>< / a> < / div> < a class =closeButton>< / a> < a class =resizeButton>< / a> < / div> < div class =bordstyle =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旋转后其他elemnt的行为不当的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！