How to drag and drop into text

Question

Before trying to build something, I would like to determine if it is possible.

Start with a text area which can be pre-populated with text and which the user can add/delete text. Now, There are some small elements to the side. They can either be images or HTML elements such as a button or anchor links, whatever is easier. The user can drag an elements into the text area, and it will be inserted at the mouse cursor location and take up text space by pushing the existing text around it (the nearby element will also remain so the user can drop a second). The elements will remain as an element which can later be dragged elsewhere in the document or outside of the view port in which it will be removed. When the elements are positioned as desired, the location of the elements can be identified through some means (regex, dom, etc) so that they can be replaced with different content.

Line breaks will be needed. Ideally, it will work with jQuery and IE7+, however, the IE7 desire might need to be changed.

I've come across the following which are close but not quite.

• http://skfox.com/jqExamples/insertAtCaret.html
• http://jsbin.com/egefi (reference jQuery Drag & Drop into a Text Area )
• http://jqueryui.com/droppable/#method-option

If you think it could be built and you have suggestions where I should start, please advise.

Answer 1

I did something very similar yesterday so why not sharing :)

My goal was to drop elements of text onto my textarea, in the middle of two lines of text while showing an indicator to where it would be dropped. I believe it will be useful to you ! ;)

$(document).ready(function() {

    var lineHeight = parseInt($('#textarea').css('line-height').replace('px',''));
    var previousLineNo = 0;
    var content = $('#textarea').val();
    var linesArray = content.length > 0 ? content.split('\n') : [];
    var lineNo = 0;
    var emptyLineAdded = false;

    $('.draggable').draggable({
        revert: function(is_valid_drop) {
            if (!is_valid_drop) {
                $('#textarea').val(content);

                return true;
            }
        },
        drag: function(event, ui) {
            lineNo = getLineNo(ui, lineHeight);

            if (linesArray.length > 0 && previousLineNo != lineNo) {
                insertWhiteLine(lineNo, linesArray);
            }

            previousLineNo = lineNo;
        }
    });

    $("#textarea").droppable({
        accept: ".draggable",
        drop: function( event, ui ) {
            appendAtLine(lineNo, linesArray, ui.draggable.text());
            $(ui.draggable).remove();
            content = $('#textarea').val();
            linesArray = content.split('\n');

            if (linesArray[linesArray.length - 1] == '')
                linesArray.pop(); //remove empty line
        }
    });

    $('#textarea').on('input', function() {
        if (!emptyLineAdded) {
            console.log('input !');
            console.log($('#textarea').val());
            content = $('#textarea').val();
            linesArray = content.split('\n');

            if (linesArray[linesArray.length - 1] == '')
                linesArray.pop(); //remove empty line
        }
    });

});


//Returns the top position of a draggable element,
//relative to the textarea. (0 means at the very top of the textarea)
function getYPosition(element, lineHeight) {
    var participantIndex = $(element.helper.context).index();
    var initPos = participantIndex * lineHeight;
    var actualPos = initPos + element.position.top;

    return actualPos;
}


//Returns the line number corresponding to where the element
//would be dropped
function getLineNo(element, lineHeight) {
    return Math.round(getYPosition(element, lineHeight) / lineHeight);
}


//Inserts a white line at the given line number,
//to show where the element would be dropped in the textarea
function insertWhiteLine(lineNo, linesArray) {
    $('#textarea').val('');
    $(linesArray).each(function(index, value) {
        if (index < lineNo)
            $('#textarea').val($('#textarea').val() + value + '\n');
    });

    emptyLineAdded = true;
    $('#textarea').val($('#textarea').val() + '_____________\n'); //white line
    emptyLineAdded = false;

    $(linesArray).each(function(index, value) {
        if (index >= lineNo)
            $('#textarea').val($('#textarea').val() + value + '\n');
    });
}


//Inserts content of draggable at the given line number
function appendAtLine(lineNo, linesArray, content) {
    $('#textarea').val('');
    $(linesArray).each(function(index, value) {
        if (index < lineNo)
            $('#textarea').val($('#textarea').val() + value + '\n');
    });

    $('#textarea').val($('#textarea').val() + content + '\n'); //content to be added

    $(linesArray).each(function(index, value) {
        if (index >= lineNo)
            $('#textarea').val($('#textarea').val() + value + '\n');
    });
}