jQuery Trascinamento in un'area di testo

Question

Uso di jQuery e cercando di consentire all'utente di trascinare un segnaposto in un'area di testo.

Ogni segnaposto è un <span> che ha un class='placeholder'. L'area di testo id è semplicemente 'main_text'.

Quindi, l'utente dovrebbe essere in grado di trascinare ciascun segnaposto span sopra l'area di testo, rilasciarlo e quindi inserire il testo.

L'effetto più desiderabile sarebbe inserire il testo nel punto in cui rilasciano il segnaposto, ma ho praticamente rinunciato a quello. A questo punto, solo per farlo funzionare in modo che inserisca il testo da nessuna parte sarebbe un buon inizio.

Qualcuno ha eseguito correttamente questo? Grazie -

Answer 1

Non penso che sia possibile utilizzare direttamente la textarea come trascinabile, quindi ho fatto un piccolo trucco che su trascina-start posiziona un div direttamente sopra la textarea. Il div è il droppable reale che poi inserisce il testo del trascinabile nella textarea

Controllare qui per una demo

http://jsbin.com/egefi (http://jsbin.com/egefi/edit per il codice)

Inserisce alla posizione textcaret corrente I don' Penso che l'inserimento alla posizione attuale del cursore del mouse sia persino possibile.

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