jQuery拖放到文本区域

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

每个占位符都是 ，其中包含class='placeholder' 。 文本区域id只是'main_text' 。

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

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

有没有人成功完成这个？ 谢谢 –

Answer 1

我不认为你可以直接使用textarea作为droppable，因此我做了一个小的黑客，在拖动开始直接在textarea上定位div。 div是实际的droppable，然后将draggable的文本插入textarea

点击这里查看演示

http://jsbin.com/egefi(http://jsbin.com/egefi/edit代码）

它插入当前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(); } }); });