I have this example of drag and drop but only one element can be added to the input, then if I want to add another one, I will not add it anymore How can I make it allow me to add more elements to the input?
$(document).ready(function(){
$('#reset').on('click', function(){
$('ul').attr('id', 'draggable');
//$('.p_lang').removeAttr('disabled', 'disabled');
$('.p_lang').val('');
});
$('li').mouseover(function(){
$(this).css('cursor', 'pointer');
});
$( "#draggable li" ).draggable({helper: 'clone'});
$(".p_lang").droppable({
accept: "#draggable li",
drop: function(ev, ui) {
$(this).insertAtCaret(ui.draggable.text());
//$(this).attr('disabled', 'disabled');
$("#draggable").removeAttr('id');
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
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();
}
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<h3 class = "text-primary">Drag and drop inserting text to input text box with jQuery</h3>
<hr style = "border-top: 1px dotted #8c8b8b;"/>
<div class = "pull-left" style = "border:1px #000 dotted; width:230px;">
<center><label style = "font-size:9px;" class = "alert-danger">Please drag your favorite programming language</label></center>
<ul style = "list-style-type:none;" id = "draggable">
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>HTML</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Python</li>
<li>Vb.net</li>
<li>Ruby</li>
<li>Pearl</li>
</ul>
<p></p>
</div>
<div class = "pull-right" style = "padding:20px; border:1px #000 dotted; width:400px;">
<div class = "form-group">
<input type = "text" name = "program" class = "form-control p_lang ui-droppable" />
<center><label>Your favorite language</label></center>
<button class = "btn btn-success pull-left" id = "reset" type = "button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button>
</div>
</div>
</div>
</div>