2009-12-17 4 views
10

Utilisation de jQuery et recherche d'un utilisateur pour 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 simplement 'main_text'. Par conséquent, l'utilisateur doit pouvoir faire glisser chaque espace réservé span au-dessus de la zone de texte, le déposer, puis le texte est inséré.Déplacement et glissement de jQuery dans une zone de texte

L'effet le plus désirable serait d'insérer du texte là où ils laisseraient tomber l'espace réservé, mais j'ai presque abandonné celui-là. À ce stade, juste pour le faire fonctionner de sorte qu'il insère le texte n'importe où serait un bon début.

Quelqu'un at-il réussi à le faire? Merci -

+0

Avez-vous trouvé une solution pour laisser tomber l'espace réservé d'où ils tombent? J'ai aussi besoin de ça ... – SimonW

Répondre

15

Je ne pense pas que vous pouvez utiliser la zone de texte directement comme droppable donc j'ai fait un petit hack qui, par glisser-démarrer, positionne un div directement sur la zone de texte. Le div est la largable réelle qui insère ensuite le texte de la draggable dans la zone de texte

Cochez cette case pour une démonstration

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

Il insère à la position textcaret actuelle Je ne Je pense que l'insertion à la position actuelle du curseur de la souris est même 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(); 
     } 
    }); 
}); 
+0

Eh bien, cela semble fonctionner. Je pense toujours que sans l'espace réservé qui tombe à l'endroit exact, il est inutilisable dans une application du monde réel, donc je vais devoir décider si je veux l'utiliser ou non dans mon application, mais, comme je l'ai dit, répond à la question. Merci - – OneNerd

Questions connexes