使用jQuery,并希望让用户将占位符拖动到文本区域.
每个占位符都是< span>它有一个class =’占位符’.文本区域id只是“main_text”.
所以,用户应该可以拖动文本区域顶部的占位符跨度,放下它,然后插入文本.
最理想的效果是在放置占位符的地方插入文本,但是我已经放弃了那个.在这一点上,只是为了让它工作,所以它插入文本在任何地方,将是一个好的开始.
有没有人成功完成这个？谢谢 –
解决方法
我不认为你可以直接使用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();
}
});
});
