jQuery拖放到文本区域

Question

使用jQuery，并希望让用户将占位符拖到文本区域。

每个占位符是一个<span>它有一个class='placeholder'。文本区id只是'main_text'。

因此，用户应该能够将每个占位符span拖放到文本区域的顶部，放下它，然后插入文本。

最理想的效果是在放置占位符的地方插入文本，但我几乎放弃了这一点。在这一点上，只是为了让它工作，所以它在任何地方插入文本将是一个好的开始。

有没有人成功地做到这一点？谢谢 -

Answer 1

我不认为你可以直接使用textarea作为droppable，因此我做了一些小工具，在drag-start上直接在textarea上放置一个div。股利是（用于代码http://jsbin.com/egefi/edit）的实际可放开，然后在这里插入可拖动文本到文本区域

检查演示

http://jsbin.com/egefi

它插入在当前textcaret位置我不不要认为插入当前鼠标光标位置是可能的。

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