jQuery拖放到文本区域

Question

使用 jQuery，并希望让用户将占位符拖到文本区域中。

每个占位符都是一个<span>，其中有一个class='placeholder'。文本区域id 就是'main_text'。

因此，用户应该能够将每个占位符 span 拖动到文本区域的顶部，将其放下，然后插入文本。

最理想的效果是在放置占位符的位置插入文本，但我几乎放弃了那个。在这一点上，让它工作，以便将文本插入到任何地方都是一个好的开始。

有没有人成功做到这一点？谢谢 -

Answer 1

我不认为你可以直接使用 textarea 作为 droppable 因此我做了一个小技巧，它在拖动开始时将 div 直接放在 textarea 上。 div 是实际的 droppable，然后将可拖动的文本插入到 textarea 中

在这里查看演示

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