调整元素以包含或排除相邻文本 - jQuery

我想弄清楚如何创建一个可调整大小以包含更多或更少周围文本的元素。调整元素以包含或排除相邻文本 - jQuery

这可能不是正确的轨道，但我在这里有一个codepen，https://codepen.io/anon/pen/GvWpmV，在蓝色背景中具有可调整大小的div。当div被拖到右边时，它会将文本推过来。我需要做的是让文字保持原样，但现在被蓝色的div所包围。当缩小div时，会发生相反的情况。任何帮助深表感谢。

<html lang = "en"> 
    <head> 
     <meta charset = "utf-8"> 
     <title>Drag element test</title> 
     <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
     rel = "stylesheet"> 
     <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

     <!-- CSS --> 
     <style> 
     .ui-widget-header { 
      background:#b9cd6d; 
      border: 1px solid #b9cd6d; 
      color: #FFFFFF; 
      font-weight: bold; 
     } 
     .ui-widget-content { 
      background: #cedc98; 
      border: 1px solid #DDDDDD; 
      color: #333333; 
     } 

     #blue-div {background-color: blue; 
     display: inline-block; 

     } 
     </style> 

     <!-- Javascript --> 
     <script> 
     $(function() { 
      $("#blue-div").resizable({ghost: true}); 
     }); 
     </script> 
    </head> 

    <body> 
     <!-- HTML --> 
     <div id="main"> 
     There is some text here. I would like to change the text in the blue div. 
     <div id="blue-div" class="ui-widget-content">blue</div> 
     more words here. 
     </div> 
    </body> 
</html>

编辑补充： 最终产品具有文本的与包裹在定制元素，从而改变外观小段在页面上的块。当用户点击某个元素时，会触发一个jquery事件，这会突出显示该区域并打开一个表单。用户可以编辑或删除与自定义元素相关的信息。

我需要添加的是用户拖动自定义元素以包含更多或更少的周围文本的能力。例如，用户可以单击该元素，然后调整其大小，以使来自

This <el>is</el> a test

的HTML改变

This <el>is a</el> test

来源

2017-08-07 rurp

给蓝<div>一个position: absolute，比文字更高z-index值。

#blue-div { 
    background-color: blue; 
    display: inline-block; 
    z-index: 99; 
    position: absolute; 
} 
#main { 
    z-index: 98; 
    position: relative; 
}

此外，我不确定为什么你的CSS是内联的？

来源

2017-08-08 00:39:01

谢谢，这使得文本不会被移动，但它不会将新近覆盖的文本移动到蓝色的div中。有什么办法可以延伸div，使它现在包含额外的文本？ – rurp

呵呵，CSS是内联的，因为我复制了可调整大小的文档中的示例以作为一个快速示例。这就是它的原因。 – rurp

我需要更多地了解您尝试实现的内容。有几种方法可以实现这一点，我只是不知道它将如何使用。 –

调整元素以包含或排除相邻文本 - jQuery

回答

相关问题