jQuery Drag & Drop in einen Textbereich

Question

Verwenden von jQuery und Suchen, damit Benutzer einen Platzhalter in einen Textbereich ziehen können.

Jeder Platzhalter ist ein <span>, der eine class='placeholder' hat. Der Textbereich id ist einfach 'main_text'.

So sollte Benutzer in der Lage sein, jeden Platzhalter span über den Textbereich zu ziehen, es fallen zu lassen, und dann Text eingefügt wird.

Am wünschenswertesten wäre es, Text einzufügen, wo sie den Platzhalter fallen lassen, aber ich habe es ziemlich aufgegeben. An dieser Stelle wäre es einfach ein guter Anfang, nur um es zum Laufen zu bringen.

Hat jemand das erfolgreich gemacht? Danke -

Answer 1

Ich glaube nicht, dass Sie die TextArea direkt als DropPable verwenden können, also habe ich einen kleinen Hack gemacht, der beim Drag-Start ein Div direkt über dem Textfeld positioniert. Die div ist die eigentlichen abwerfbaren, die dann fügt den Text des ziehbar in das Textfeld

prüfen für eine Demo

http://jsbin.com/egefi (http://jsbin.com/egefi/edit für den Code)

Es fügt an aktueller textcaret Position I don‘ t denke, das Einfügen an der aktuellen Mauszeigerposition ist sogar möglich.

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