jQuery Drag & Drop dans une Zone de Texte

À l'aide de jQuery, et qui cherchent à permettre à l'utilisateur de faire glisser un espace réservé dans une zone de texte.

Chaque espace réservé est un <span> qui a un class='placeholder'. La zone de texte id est tout simplement 'main_text'.

Ainsi, l'utilisateur devrait être en mesure de faire glisser chaque espace réservé span sur le dessus de la zone de texte, de le déposer, et puis le texte est inséré.

Plus souhaitable pour effet d'insérer du texte où ils abandonnent l'espace réservé, mais j'ai beaucoup donné dans cette. À ce point, juste pour le faire fonctionner, donc il insère le texte n'importe où serait un bon début.

Quelqu'un a réussi à faire cela? Merci -

Avez-vous trouvé une solution à la baisse de l'espace réservé où ils abandonnent? J'ai besoin de cette trop...

OriginalL'auteur OneNerd | 2009-12-17

  1. 15

    Je ne pense pas que vous pouvez utiliser le textarea directement comme drop, donc j'ai fait un petit hack qui sur un glisser-positions de départ un div directement sur le textarea. La div est le drop, qui insère ensuite le texte de la déplaçable dans le textarea

    Vérifier ici pour une démo

    http://jsbin.com/egefi (http://jsbin.com/egefi/edit pour le code)

    Il insère au courant textcaret position, je ne pense pas que l'insertion à la position du curseur de la souris est encore 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();
        }
    });
});
    Eh bien, il semble certainement de travail. Je continue de penser que sans l'espace réservé tomber sur endroit exact, il est inutilisable dans le monde réel de l'application, de sorte que je dois décider si je veux ou non de l'utiliser dans mon application, mais, comme je l'ai dit - répond à la question. Merci

    OriginalL'auteur jitter