Сделал для себя редактор Markdown файлов на ASP.NET Core + JQuery, но это не важно.
Проблема вот в чем есть у меня код для перетаскивания Span внутрь Textarea, оно работает но криво, т.е. перетащенный блок вставляется туда где был курсор а не туда куда перетащил.
Вопрос вот в чем, как переместить текстовый курсор внутри textarea в то место где находится курсор мыши, перед отпусканием кнопки мыши.
JS код ниже
$(document).ready(function () {
$("#Content").scroll(function () {
$('#renderedMD').scrollTop(this.scrollTop / this.scrollHeight * $('#renderedMD').prop('scrollHeight'));
});
function insertAtCaret(element, text) {
console.log("insertAtCaret");
if (document.selection) {
element.focus();
var sel = document.selection.createRange();
sel.text = text;
element.focus();
} else if (element.selectionStart || element.selectionStart === 0) {
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
var scrollTop = element.scrollTop;
element.value = element.value.substring(0, startPos) + ' ' + text + ' ' +
element.value.substring(endPos, element.value.length);
element.focus();
element.selectionStart = startPos + text.length;
element.selectionEnd = startPos + text.length;
element.scrollTop = scrollTop;
} else {
element.value += ' ' + text + ' ';
element.focus();
}
}
var options = {
accept: "span.placeholder",
drop: function(ev, ui) {
insertAtCaret($("textarea#Content").get(0), ui.draggable.eq(0).text());
}
};
$("span.placeholder").draggable({
helper:'clone',
start: function(event, ui) {
var txta = $("textarea#Content");
console.log("span.placeholder.draggable");
$("div#pseudodroppable").css({
position:"absolute",
top:txta.position().top,
left:txta.position().left,
width:txta.width(),
height:txta.height()
}).droppable(options).show();
},
stop: function(event, ui) {
console.log("stop draggable");
insertAtCaret($("textarea#Content").get(0), "eeeeeee wqewerwqer weqrwq erqwer");
$("div#pseudodroppable").droppable('destroy').hide();
}
});
});
@model mrkdoc.Models.ContentMD;
<style>
div img {
max-width: 100px;
width: 100px;
}
</style>
<form asp-action="Edit">
<a asp-action="AddFile" asp-route-dirname="@Model.Path" asp-route-filename="@Model.FileName">Добавить файлы</a>
<input asp-for="FileName" type="hidden" />
<div class="row" style="border-radius:6px; border:1px solid #e1e4e8">
<div class="col-md-12">
<span class="placeholder badge badge-primary" style="position: relative;z-index:100">Перетаскиваемый1</span>
<span class="placeholder badge badge-primary" style="position: relative;z-index:100">Перетаскиваемый2</span>
<span class="placeholder badge badge-primary" style="position: relative;z-index:100">Перетаскиваемый3</span>
<span class="placeholder badge badge-primary" style="position: relative;z-index:100">Перетаскиваемый4</span>
<div class="row">
<div class="col-md-8">
<span>
<h6 style="margin-top:10px;font-weight:bold">@Model.TopicName/@ViewData["ShortFileName"]</h6>
</span>
</div>
<div class="col-md-4">
<a asp-action="Index" class="btn btn-sm btn-light" style="float:right;margin-top:4px;margin-left:12px;">Назад</a>
<button id="success" type="submit" class="btn btn-sm btn-success" style="float:right;margin-top:4px;">Сохранить</button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<textarea asp-for="Content" contenteditable="true" class="form-control" style="height:1200px">
@Model.Content
</textarea>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<div class="rendered-md" id="renderedMD" name="renderedMD" style="margin-top: 4px;border: 1px solid #ced4da; border-radius: 0.25rem;height:1200px;overflow-y:scroll;overflow-x:scroll;">
@ViewData["RenderedMarkdown"]
</div>
</div>
</div>
</div>
</div>
</div>
</form>
