Перетаскивание jQuery в Текстовую область

Question

Перетаскивание jQuery в Текстовую область

Используя jQuery, и надеющийся позволять пользователю перетащить заполнителя в текстовую область.

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

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

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

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

10

jquery drag-and-drop

задан jitter 17 December 2009 в 15:50

1 ответ

Другие вопросы по тегам:

jquery drag-and-drop

Похожие вопросы:

score 16 · Accepted Answer

I don't think you can use the textarea directly as droppable thus I made a little hack which on drag-start positions a div directly over the textarea. The div is the actual droppable which then inserts the text of the draggable into the textarea

Check here for a demo

http://jsbin.com/egefi (http://jsbin.com/egefi/edit for the code)

It inserts at current textcaret position I don't think inserting at current mouse cursor position is even possible.

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();
        }
    });
});