Google Chrome захватывает предыдущий символ при drag'n'drop в </h1> </div> <div class="question-subheader"> <a href="https://ru.stackoverflow.com/u/406363" class="question-author" target="_blank"> Автор вопроса: DiD </a> </div> <div class="question-text"> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea cols="80" rows="10"> row1w1 row1w2 row1w3 row1w4 row1w5 row2w1 row2w2 row2w3 row2w4 row2w5 row3w1 row3w2 row3w3 row3w4 row3w5 row4w1 row4w2 row4w3 row4w4 row4w5 row5w1 row5w2 row5w3 row5w4 row5w5 row6w1 row6w2 row6w3 row6w4 row6w5 row7w1 row7w2 row7w3 row7w4 row7w5 </textarea></code></pre> </div> </div> </p> <p>Чистый код textarea (как в песочнице) без всяких побочных факторов (вроде скриптов и специфических стилей) свою работу через drag'n'drop в браузере Chrome сопровождает странное явление. Например, я переношу первое слово с любой строки куда-нибудь как на гифке.</p> <p><a href="https://i.stack.imgur.com/UHneC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHneC.gif" alt="Google Chrome захватывает предыдущий символ при drag-n-drop в textarea" /></a></p> <p>Вместе со словом почему-то drag съедает символ перед словом (в данном случае это символ переноса строки), несмотря на то, что этот символ не был выделен. "Компенсируется", если так можно выразиться, пробелом поставленным перед вставленным в новое место словом. В некоторых случаях этот пробел может стоять перед словом, после слова и даже превратиться в два пробела с обоих сторон слова, а иногда и вовсе не появляется.</p> <p>Собственно вопрос. Существует ли способ наладить привычную работу в браузере Chrome как в обычных текстовых редакторах или как в Firefox? Есть где-нибудь стандарт, ну или хоть какое-то описание принципов работы явления, когда ставит пробел, а когда не ставит?</p> <p><a href="https://i.stack.imgur.com/I5yyU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I5yyU.gif" alt="Нормальная работа Drag-n-Drop в браузере Firefox" /></a></p> <br> </div> <div class="question-source"> <a href="https://ru.stackoverflow.com/q/1332259" target="_blank" class="source-link">Источник</a> </div> <div class="after"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-7213297900893379" data-ad-slot="7637638360"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="answers"> <h3 class="answers-title"> Ответы <span>(1 шт):</span> </h3> <div class="answers-list"> <div class="answers-item" id="answer-1"> <a href="https://ru.stackoverflow.com/u/406363" target="_blank" class="answer-author">Автор решения: DiD</a> <div class="answer-content"><p>Захаркодил решение. Надеюсь, оно не самое лучшее, что можно придумать. А так этот костыль похоже на те костыли, которые использовали в вёрстке в первой половине 2000-х.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Если браузер Google Chrome if (/Chrome/.test(window.navigator.userAgent)) { // Переменная отвечающая за текущее перетаскивание let dragging = null // Флаг сигнализирует, что браузер захватил символ перед выделенным текстом let captureFlag = null; // Обработаем событие dragStart textarea.ondragstart = (e) => { // Здесь получаем значения что изначально было выделено const { value, selectionStart, selectionEnd } = textarea; // Непосредственно само выделение const selectionData = value.substring(selectionStart, selectionEnd); // И на всякий сохраним один символ до выделения const selectionBefore = selectionStart ? value[selectionStart - 1] : ''; dragging = { selectionStart, selectionEnd, selectionData, selectionBefore }; } // Обработаем другое событие input textarea.oninput = (e) => { // Тут у нас два этапа if (e.inputType == 'deleteByDrag') { // Первый этап - это удаление текста из старого места const { selectionStart } = textarea; // Устанавливаем значение флага, если текущее положение курсора // на единицу меньше выделения captureFlag = dragging && selectionStart == (dragging.selectionStart - 1); } else if (e.inputType == 'insertFromDrop') { // Второй этап - это вставка текста в новое место if (dragging) { // Эти переменные содержат уже новые значения после вставки const { value, selectionStart, selectionEnd } = textarea; // Сначала вырежем из нашего значения то, что вставлено let newValue = value.substr(0, selectionStart) + value.substr(selectionEnd); // Если браузер всё таки захватил символ перед выделением if (captureFlag && dragging.selectionStart > 0) { // Посчитаем его позицию const insertPos = dragging.selectionStart - 1; // Вставим символ на место newValue = newValue.substr(0, insertPos) + dragging.selectionBefore + newValue.substr(insertPos); } // Далее надо определиться со смещением // Если вставленный текст был вставлен куда-нибудь после изъятия, // то нам надо учесть символ который мы только что вставили const offset = (captureFlag && (selectionStart > dragging.selectionStart)) ? 1 : 0; // Теперь посчитаем позиции куда вставим выделенный изначально текст const newSelectionStart = selectionStart + offset; const newSelectionEnd = dragging.selectionEnd - dragging.selectionStart + selectionStart + offset; // Вставляем текст, который был выделен изначально (еще в событии dragstart) newValue = newValue.substr(0, newSelectionStart) + dragging.selectionData + newValue.substr(newSelectionStart); // Применяем новое значение textarea.value = newValue; //И выделем эту область текста для кошерности textarea.setSelectionRange(newSelectionStart, newSelectionEnd, "none"); } } } // Обнуляем переменные по окончанию перетаскивания textarea.ondragend = () => { dragging = null; captureFlag = null }; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="textarea" cols="80" rows="10"> row1w1 row1w2 row1w3 row1w4 row1w5 row2w1 row2w2 row2w3 row2w4 row2w5 row3w1 row3w2 row3w3 row3w4 row3w5 row4w1 row4w2 row4w3 row4w4 row4w5 row5w1 row5w2 row5w3 row5w4 row5w5 row6w1 row6w2 row6w3 row6w4 row6w5 row7w1 row7w2 row7w3 row7w4 row7w5 </textarea></code></pre> </div> </div> </p> </div> <a href="#answer-1" class="answer-link">→ Ссылка</a> </div> </div> </div> <div class="answers-vk">  <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v18.0&appId=2623658001082461" nonce="x6mCrB0v"></script> <div class="fb-comments" data-href="https://huslhub.com" data-width="850" data-numposts="5"></div> </div> </div> </div> </div> </div> <div class="footer-outer"> <div class="container"> <div class="footer"> <p> <span>licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="nofollow">cc by-sa 3.0</a> with attribution. </span> </p> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-61W54EQCFG"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-61W54EQCFG'); </script>    </body> </html>