JS событие drop в contenteditable, как получить место сброса?

Question

Пишу wysiwyg редактор, переопределяю стандартное поведение браузера при событии 'drag&drop' (перетаскивание элементов), сперва хотел бы узнать, как получить точное место вставки переносимого фрагмента? Узел в который сбрасывают перетаскиваемые элементы. Хотелось бы знать конкретный узел и конкретный offset в этом узле.

function dropHandler(event) {
    
  event.preventDefault();
  
  console.log(event.target)
  // получить тут точный узел в который сбрасываем переносимые объекты, 
  // чтобы перед вставкой разбить его пополам
  // и между этими частями сбросить объекты
    
}
            
document.addEventListener('drop', dropHandler);

<div id="editor_body" contenteditable="true">
  <p>Что переносим</p>
  <p>Куда переносим</p>
</div>

Выделите "Что переносим" и сбросьте его в "Куда переносим", родительский тэг "p" вычислить удается, но хотелось бы поточнее, а именно знать offset и конечный узел

Answer 1

Нашел решение:

function dropHandler(event) {

    event.preventDefault();

    if (document.caretPositionFromPoint) {
    
        range = document.caretPositionFromPoint(event.clientX, event.clientY);
        textNode = range.offsetNode;
        offset = range.offset;
    
    }   else if (document.caretRangeFromPoint) {

        range = document.caretRangeFromPoint(event.clientX, event.clientY);
        textNode = range.startContainer;
        offset = range.startOffset;
        
    }

    console.log(textNode, offset);
    
}

БЛОГ НА HUSL

JS событие drop в contenteditable, как получить место сброса?

Ответы (1 шт):