Что-то получается, пока не могу решить чтобы если уже есть слово, второе туда нельзя перетащить было или они менялись бы местами:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3 {
display: inline-block;
width: 100px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
#div1 input, #div2 input, #div3 input {
width: 100%;
display: block;
text-align: center;
vertical-align: middle;
background: #006696;
color: #fff;
}
.mesto {
height: 20px;
min-width: 70px;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
background: #006696;
}
.mesto input {
width: fit-content;
background: #006696;
padding: 0 10px;
color: #fff;
border: none;
vertical-align: middle;
text-align: center;
min-width: 50px;
height: inherit;
}
p {
display: block;
float: none;
clear: both;
margin-top: 50px;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Расставь пропущенные слова в предлоежнии</h2>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Магазин" id="drag1">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Молоко" id="drag2">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Хлеб" id="drag3">
</div>
<p>
Он пошел в
<span class="mesto" id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
, чтобы купить <span class="mesto" id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></span> и свежий <span class="mesto" id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></span> на ужин.
</p>
</body>
</html>
// Сори, не получилось чтобы внизу была кнопка с запуском((