如何让文本区域的光标在拖放时移动到突出显示的文本的末尾？

Question

当我将图像拖放到文本区域时，文本会高亮显示。
有没有办法让文本区域的光标移动到突出显示的文本的末尾？

document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
emoteImage.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text', emoteImage.alt);
event.effectAllowed = "copy";
});
});

img {
width: 100px;
}

<div class="emote">
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote1" class="emoteImage">
</div>
<textarea></textarea>

Answer 1

i添加了一个"dragEnd"事件，将光标移动到突出显示的文本的末尾。希望有帮助：(

var element = document.getElementById("textArea");
document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
emoteImage.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text', emoteImage.alt);
event.effectAllowed = "copy";
});
emoteImage.addEventListener( 'dragend', function( event ) {
var end = element.selectionEnd ;
element.focus();
element.setSelectionRange(end,end);
});
});

img {
width: 100px;
}

<div class="emote">
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote1" class="emoteImage">
</div>
<textarea id="textArea" ></textarea>