jQuery Arrastrar y colocar en un área de texto

Question

Usando jQuery, y buscando que el usuario arrastre un marcador de posición en un área de texto.

Cada marcador de posición es <span> que tiene un class='placeholder'. El área de texto id es simplemente 'main_text'.

Por lo tanto, el usuario debería poder arrastrar cada marcador de posición span en la parte superior del área de texto, soltarlo y, luego, insertar el texto.

El efecto más deseable sería insertar texto donde dejan caer el marcador de posición, pero casi me he rendido por eso. En este punto, solo para que funcione, de modo que inserte el texto en cualquier parte, sería un buen comienzo.

¿Alguien ha hecho esto con éxito? Gracias -

Answer 1

No creo que puedas usar el área de texto directamente como droppable, así que hice un pequeño hack que en las posiciones de drag-start directamente divide un div sobre el área de texto. El div es el lanzables real que a continuación se inserta el texto de la que pueden arrastrarse en el área de texto

Marque aquí para ver una demostración

http://jsbin.com/egefi (http://jsbin.com/egefi/edit para el código)

Se inserta en la posición textcaret corriente I don' t pensar que incluso es posible insertar en la posición actual del cursor del mouse.

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