Показать сообщение отдельно
  #18 (permalink)  
Старый 11.11.2019, 12:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Ну каково должно быть поведение, может так?

<!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"><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>
$(function() {
    $('div.pull-right').on('click', 'button', function(){
        if(this.id=='reset') {
            $('#draggable li').show();
            $('.p_lang').val('').prop('disabled', false);
            $('button').not(this).remove();
        } else {
            var e = $(this).prev();
            $('#draggable li:contains('+e.val()+')').show();
            e.val('').prop('disabled', false);
            $(this).remove();
        }
	});
		
    $('li').mouseover(function(){
        $(this).css('cursor', 'pointer');
    });
		
    $( "#draggable li" ).draggable({helper: 'clone'});
    $(".p_lang").droppable({
        accept: "#draggable li",
		drop: function(ev, ui) {
            if(ev.target.value) return false;
            $(this).val(ui.draggable.text()).prop('disabled', true).after('<button>Edit</button>');
            ui.draggable.hide();
		}
	});
});
</script>
</html>
Ответить с цитированием