調整元素以包含或排除相鄰文本 - 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

回答

相關問題