Вопрос по JS // Drag & drop span-а в textarea

  1. 3 г. назад

    Сделал для себя редактор 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>
    
    
  2. webdev тынц!

    Ответы: (2)
  3. Курильщик webdev тынц!

    https://stackoverflow.com/questions/39151580/how-to-locate-cursor-index-when-handling-drop-event

  4. Последний ответ?

    Ответы: (4)
  5. Курильщик Последний ответ?

    Там единственный ответ

  6. А нет, там фигня какая-то. У чувака все работало изначально, а у тебя в чем-то баг.

    Сделай рабочий пример на https://jsfiddle.net чтобы можно было воспроизвести ошибку

    Ответы: (6)
  7. (5) https://jsfiddle.net/p8nwLg7c/
    но я не понял как подключить jquery-ui.js

  8. добавил jquery и jquery-ui но что то не работает как на моем серваке.

    https://jsfiddle.net/p8nwLg7c/1/

    Ответы: (8)
  9. Курильщик добавил jquery и jquery-ui но что то не работает как на моем серваке.

    https://jsfiddle.net/p8nwLg7c/1/

    То есть там работает как надо, а у тебя на серваке не работает?

    Ответы: (9) (10)
  10. 31.08.2020 19:32:12 отредактировано Курильщик

    (8) не, ты умеешь jquery в jsfiddle.net подключать?

    Ответы: (10)
  11. Курильщик (8) не, ты умеешь jquery в jsfiddle.net подключать?

    https://jsfiddle.net/boilerplate/jquery

    Вот так

    Ответы: (14) (17)
  12. https://jsfiddle.net/p8nwLg7c/2/

  13. https://jsfiddle.net/p8nwLg7c/3/

  14. не умеем мы
    хватит [...] заниматься
    Мейсон пришел. вопросы задает

  15. (10) вот вроде должно работать
    https://jsfiddle.net/p8nwLg7c/4/

    Ответы: (17)
  16. webdev !

  17. не мешай лукашенку свергать

  18. Курильщик (10) вот вроде должно работать
    https://jsfiddle.net/p8nwLg7c/4/

    У меня все работает чотко. Что не так?

  19. 31.08.2020 21:33:57 отредактировано Курильщик

    "перетаскиваемый 1" должен перетаскиваться без пометки мышкой, просто потянув

    Ответы: (19)
  20. Курильщик "перетаскиваемый 1" должен перетаскиваться без пометки мышкой, просто потянув

    А как браузер узнает что его можно перетаскивать? Ты забыл добавить draggable="true"

    И раз ничего не выделил, то нужно вручную задать текст, который должен вставиться, вот так:
    ondragstart="event.dataTransfer.setData('text/plain', 'золупа')"

    Смотри пример для перетаскиваемый 4:

    https://jsfiddle.net/rLbof40d/

    Ответы: (20)
  21. webdev А как браузер узнает что его можно перетаскивать?

    draggable ставил, дело было не в бобине.

  22. спасибо

  23. 03.09.2020 15:20:45 отредактировано Курильщик

    Еще с одной фигнёй столкнулся, пока не придумал как победить.

    есть у меня <div> в нем находится содержимое типа такого

    <p><strong>Advertisement</strong></p>
    <p><code>Код</code></p>
    <pre><code>123
    123
    </code></pre>
    <h2 id="__-eee-__">
    __ eee __</h2>
    <p><strong>Advertisement</strong></p>
    <p>You will like those projects!</p>
    

    и т.д. мне нужно при открытии страницы найти слово "Advertisement" и перелистать к нему, в диве есть скролл.

  24. написал что то вроде этого
    $('#view-btn').click(function(){
    var i = 0;
    var text = "Advertisement";
    var scrollTop = $('#view-rendered').scrollTop();
    console.log("scrollTo(function()");
    var element = $("#view-rendered div:contains('" + text + "')").eq(i);
    element.css('background-color', 'yellow');
    var position = element.position();
    var offset = scrollTop + position.top;
    $('#view-rendered').scrollTop(offset);
    i++;
    });

  25. Сделай пример на jsfiddle.net что у тебя не получается?

    Ответы: (25)
  26. (24) починил надо было не <div> скролить а window

  27. ну если тебе это надо было, то ок

или зарегистрируйтесь чтобы ответить!