Я реализую функцию Заполнить пробелы.
Здесь у меня есть список ответов выше i.e один, два, три и т.д. и пустые пространства ниже, где эти ответы будут заполнены.
Вещи, которые выполняются
1) Перетащите параметры из списка ответов и заполните пустые поля. Готово
2) Если я перетащил ответ из заполненного поля в пустой поле, предыдущее значение должно быть пустым. Готово
Теперь возникает проблема
1) Если я перетащил ответ из заполненного поля в другой заполненный ящик, то как переключить значения и положение обоих полей. Я думал, что мы можем получить позицию предыдущего и текущего, а затем поменять позицию, но не знаем, как ее реализовать.
2) Если я перетащил значение из списка ответов в заполненный ящик, то как их поменять
Вот что я сделал до сих пор:
$(document).ready(function() {
var arr;
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
arr = [];
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$('span').each(function() {
arr.push($(this).text());
});
//console.log(JSON.stringify(arr));
var matched = arr.filter((value) => value == dragedElement);
//console.log(JSON.stringify(matched));
$('span').each(function() {
if ($(this).text() == matched[1]) {
$(this).addClass('matched');
//localStorage.setItem('prevValue', $(this).text());
$('span.matched').text('');
$(this).removeClass("ui-state-highlight");
$(this).removeClass('matched');
}
});
$(this).html(dragedElement);
$(this).addClass("ui-state-highlight");
}
});
$("ul > li").draggable({
revert: "invalid"
});
})span {
width: 100px;
display: inline-block;
height: 20px;
background: #ffffff;
}
body {
font: 13px Verdana;
}
ul {
list-style: none;
padding: 10px;
background: yellow;
}
ul li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: rgb(0, 255, 213);
}
p {
padding: 10px;
background: rgb(255, 145, 0);
}<link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css'; return false;" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<p>hello
<span></span>hello
<span></span>hello
<span></span>
</p>