jQuery Drag&放入文本区域 [英] jQuery Drag & Drop into a Text Area

问题描述

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

Using jQuery, and looking to let user drag a placeholder into a text area.

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

Each placeholder is a <span> which has a class='placeholder'. The text area id is simply 'main_text'.

所以，用户应该能够拖动文本区域顶部的每个占位符 span ，然后将其放入文本中。

So, user should be able to drag each placeholder span on top of text area, drop it, and then text gets inserted.

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

Most desirable effect would be to insert text where they drop the placeholder, but I have pretty much given up on that one. At this point, just to get it working so it inserts the text anywhere at all would be a good start.

有没有人成功完成这个？谢谢 -

Has anyone successfully done this? Thanks -

推荐答案

我不认为你可以直接使用textarea作为droppable，所以我做了一个小黑客，开始在文本区域直接放置div。 div是实际的droppable，然后将draggable的文本插入textarea

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

在这里查看演示

http://jsbin.com/egefi （ http://jsbin.com/egefi/edit 代码）

它插入当前textcaret的位置我不认为插入当前的鼠标光标位置是可能的。

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

这篇关于jQuery Drag&放入文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！