Мне нужно создать шаблон сообщения следующим образом:
Hello Stackoverflow {Текст A} Спасибо за вашу поддержку {Текст B}
В этом случае мне нужно использовать перетаскивание полей в Textarea, я выполнил начальные НИОКР, чтобы найти библиотеку для выполнения моего требования, и нашел это Вставка текста с помощью перетаскиванияn 'drop
$(document).ready( function() {
$('#ClickWordList li').click(function() {
$("#txtMessage").insertAtCaret($(this).text());
return false
});
$("#DragWordList li").draggable({helper: 'clone'});
$(".txtDropTarget").droppable({
accept: "#DragWordList li",
drop: function(ev, ui) {
$(this).insertAtCaret(ui.draggable.text());
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA / NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
HTML
<body>
<div id="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div id="maincolumn">
<div class="text">
<h2>Message #1</h2>
<textarea name="txtMessage" id="txtMessage" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
<h2>Message #2</h2>
<textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
</div>
</div>
</div>
<div id="leftcolumn">
<fieldset>
<legend>Click to insert:</legend>
<ul id="ClickWordList">
<li>Hello world!</li>
<li>All your base</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</fieldset>
<fieldset>
<legend>Drag to insert:</legend>
<ul id="DragWordList">
<li class="ui-draggable">Hello world!</li>
<li class="ui-draggable">All your base</li>
<li class="ui-draggable">Lorem ipsum dolor sit amet...</li>
</ul>
</fieldset>
</div>
</div>
</body>
Это прекрасно работает, , но мне нужно только нажать на поле идобавить выбранный элемент в Textarea (опция перетаскивания не требуется), а также необходимо удалить добавленное поле из Textarea, нажав на крестик. Как я могу это сделать, пожалуйста, помогите мне решить эту проблему . Приведенный выше пример не совсем понятен для меня. поэтому, пожалуйста, помогите мне решить это.
Обновление: Как говорит Твисти, не может реализовать X внутри Textarea, что я могу использовать вместо него? Любое предложение?