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

标签 javascript jquery css jquery-ui

我为文本旋转、调整大小和文本拖动编写了一些代码。开始时一切正常。请看这段代码

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

关于javascript - 使用 jquery 旋转后其他元素的不当行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40259059/

相关文章:

javascript - D3 + 谷歌地图 + 多点路径

javascript - 如何使用 Angularjs 显示面包屑

javascript - 是否可以响应式地换行表行?

CSS 如何设置 div 高度 100% 减去 nPx

javascript - useReducer 返回一个 promise 而不是更新的状态

javascript - 无法在 Meteor 中加载 Favicon

jquery - 获取文档标题

javascript - 如何在每次点击时添加然后删除外部 div 上的类

jquery - 动态标题栏/导航栏

javascript - 缩小 border-radius div 元素并保持相同位置,蛋形