нуб, то я нуб, но пользоваться поиском умею)
Если бы разобрался, я бы не спрашивал...
Мне удалось перетаскивать текст в input, но не удалось удалить li который переносили, а так же не удалось заблокировать input, в который перетащили от дальнейших изменений, ввести в ручную в него текст нельзя, но при перетаскивании все равно добавляется...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
</head>
<body>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<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 = "program1" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program2" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program3" class = "form-control p_lang ui-droppable" />
<input type = "text" name = "program4" 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>
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type = "text/javascript">
$(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');
$(this).closest('.droppable');
}
});
});
$.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>
</html>