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

我写了一些代码用于文本旋转，resize和文本拖动。 一开始就一切正常。 请参阅此代码

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

   
 
 
  Add Your Text     
 
  
 
  

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

但是在文本轮换之后，这个问题就到了

1. 旋转文本并进行编辑时，旋转图标和关闭图标丢失。

2. 有些时候文字出现在边框之外

3. 旋转和编辑文本后，divresize不起作用

4. resize按钮，关闭按钮远离边框

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

Answer 1

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

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

旋转和编辑文本后，divresize不起作用这可能是由于前面提到的浏览器问题没有正确理解旋转内容的子元素的位置。

resize按钮，关闭按钮远离边框可能与第一个问题有关

有时网页警告无响应的脚本正在运行您应该将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; } 

  
 
 
 
 Add Your Text