jquery可拖动事件更改子元素的css

Posted 2023-03-06

技术标签:

【中文标题】jquery可拖动事件更改子元素的css【英文标题】：jquery draggable event changing the css of child element 【发布时间】：2017-03-13 13:19:18 【问题描述】：

您好，请查看此代码

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


$(".span1").on("click", function(e) 

  var mycontent1 = $(this).text();
  e.preventDefault();
  $(".span1").focus();
  $('.new-div').removeClass('active');
  $(this).closest('.new-div').addClass('active');

  if (mycontent1.trim() === "message") 

    $(".span1").text('');
    $(this).css("width", "100px");
    $(this).css("height", "6%");
    $('.new-div').css("width", "100px");
    $('.new-div').css("height", "6%");
  
);

$("#font-size").on("change", function() 
  var v = $(this).val();
  $('.new-div').css('font-size', v + 'px');
);
$('.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)
    );


  
);

.new-div 
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 15px;
  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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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="span1" data-scale-reference=".new-div">
     message
         </span>
      <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>

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

当我在文本框中键入消息并调整该时间的大小时，这可以正常工作。但是在调整文本大小并拖动时间调整大小框远离 div 的文本之后。为什么会这样？

【问题讨论】：

【参考方案1】：

将您的 contenteditable="true" 属性从div.new-div (<div class="new-div" contenteditable="true" >) 到span.span1 (<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">)

所以你的代码看起来像这样......

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


$(".span1").on("click", function(e) 

  var mycontent1 = $(this).text();
  e.preventDefault();
  $(".span1").focus();
  $('.new-div').removeClass('active');
  $(this).closest('.new-div').addClass('active');

  if (mycontent1.trim() === "message") 

    $(".span1").text('');
    $(this).css("width", "100px");
    $(this).css("height", "6%");
    $('.new-div').css("width", "100px");
    $('.new-div').css("height", "6%");
  
);

$("#font-size").on("change", function() 
  var v = $(this).val();
  $('.new-div').css('font-size', v + 'px');
);
$('.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)
    );


  
);

.new-div 
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 15px;
  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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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">
      <span contenteditable="true" data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
     message
         </span>
      <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>

它应该可以为您解决问题；）

【讨论】：

【参考方案2】：

如果您希望文本框在拖动时保持其大小，可以在可拖动组件事件处理程序中删除以下调用：

$(".new-div").css("width", 'auto');

生成的代码将是：

$(".new-div").draggable(
    containment: "#bord"
);

在下面的代码 sn-p 中，我还对span 元素的单击事件处理程序进行了更改，以在用户键入新文本时使文本框居中。为了获得这种行为，我必须在盒子里放一个不间断的空格。由于点击message后选择了该字符，因此用户输入的新内容将覆盖它。

最后，在 Chrome 中可以看到一个焦点矩形。这个 CSS 属性可以用来隐藏它：

.new-div:focus 
    outline: none;

致谢：范围选择代码的灵感来自 this answer，由 Tim Down 提供。

$(".new-div").draggable(
    containment: "#bord"
);

$(document).on("click", ".closeButton", function () 
    $(this).closest("div").remove();
);

$(".span1").on("click", function (e) 
    e.preventDefault();
    $(".new-div").removeClass("active");
    $(this).closest(".new-div").addClass("active");
    if ($(this).text().trim() === "message") 
        $(this).html("&nbsp;");
        var range = document.createRange();
        range.setStart(this, 0);
        range.setEnd(this, 1);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        $(".new-div").focus();
    
);

$("#font-size").on("change", function () 
    var v = $(this).val();
    $(".new-div").css("font-size", v + "px");
);

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

.new-div 
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 15px;
  border: 2px solid black;

.new-div:focus 
    outline: none;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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="span1" data-scale-reference=".new-div">
     message
         </span>
      <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>

【讨论】：

【参考方案3】：

我认为主要问题是您在 div 内输入 .closebutton no ;)

我没有那么先进来完全修复它，但是......

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

          		$(".new-div").remove();
           	);
         
                                 
        $(".span1").on("click", function(e)
                        
                         var mycontent1= $(".span").text();
                        e.preventDefault();
                         $(".span1").focus();
                         $('.new-div').removeClass('active');
                         $(this).closest('.new-div').addClass('active');
                         
                       if(mycontent1.trim()==="message")
                        
                        $(".span1").text('');
                        $(this).css("width","100px");
                        $(this).css("height","6%");
                        $('.new-div').css("width","100px");
                        $('.new-div').css("height","6%");
                            
                  ); 
                      
       $("#font-size").on("change",function()
                     var v=$(this).val();
                      $('.new-div').css('font-size', v + 'px');
                     );
$('.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));

  

);

.new-div  
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; 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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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="span1" data-scale-reference=".new-div">
     message
         </span>
     <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>

【讨论】：

【参考方案4】：

这是关于文本框位置的，它从右对齐开始。

【讨论】：

以上是关于jquery可拖动事件更改子元素的css的主要内容，如果未能解决你的问题，请参考以下文章

受原始元素上的 css 更改影响的 Jquery 可拖动助手

将元素附加到子元素会触发父元素中的 drop 事件

如何将子元素以外的元素用作拖动手柄？

在“停止”事件期间如何定位克隆的可拖动元素？

jquery 可拖动 + 可在放置事件时使用自定义 html 排序？

允许在 HTML 5 可拖动子元素上选择文本