jQuery Drag & Drop в текстовую область

Question

Использование jQuery и возможность перетаскивания заполнителя в текстовую область.

Каждый заполнитель - это <span>, который имеет class='placeholder'. Текстовая область id это просто 'main_text'.

Таким образом, пользователь должен иметь возможность перетаскивать каждый заполнитель span поверх текстовой области, отбрасывать его, а затем текст вставляется.

Наиболее желательным эффектом будет вставка текста в тех местах, где они помещают заполнитель, но я почти отказался от этого. На этом этапе, просто чтобы заставить его работать так, чтобы он вставлял текст где угодно, было бы хорошим началом.

Кто-нибудь успешно это сделал? Спасибо -

Answer 1

Я не думаю, что вы можете использовать текстовую область непосредственно как сбрасываемую, поэтому я сделал небольшой хак, который при перетаскивании позиционирует div непосредственно над текстовой областью. DIV - это фактическое значение, которое затем вставляет текст перетаскиваемого объекта в текстовое поле

.

Проверьте здесь демо

http://jsbin.com/egefi (http://jsbin.com/egefi/edit для кода)

Вставка в текущую позицию курсора текста. Не думаю, что вставка в текущей позиции курсора мыши возможна.

function insertAtCaret(area, text) {
    //... adapted from http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/
}

$(document).ready(function() {
    var options = {
        accept: "span.placeholder",       
        drop: function(ev, ui) {
            insertAtCaret($("textarea#main_text").get(0), ui.draggable.eq(0).text());
        }
    };

    $("span.placeholder").draggable({
        helper:'clone',
        start: function(event, ui) {
            var txta = $("textarea#main_text");
            $("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) {
            $("div#pseudodroppable").droppable('destroy').hide();
        }
    });
});