Hi need help please, I want the user can change the button that he drops to the slots, by dropping another button and the previous button will go back where it sits before. or I can drag it back where it sits.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
.btn-success:hover {
background-color: #28a745 !important;
border-color: #28a745 !important;
}
div.ui-droppable-disabled.divslot {
background-color: #28a745;
}
div.divslot {
border: 1px solid #3c8dbc;
}
.content {
margin-top: 50px;
}
/* .......... */
.ml-1 .btn {
display: block;
}
.mr-1,
.ml-1 {
margin: 1rem 0;
white-space: nowrap;
display: flex;
min-height: 29px;
}
.mr-1.divslot {
flex: 1 0 0%;
border: 1px dashed #666;
}
.mr-1.divslot.isDropped {
max-width: min-content;
}
.ui-draggable-disabled {
outline: 1px dotted #666;
outline-offset: -2px;
}
.ml-1 .btn:active {
background: transparent !important;
border: 1px dashed #666;
transition: background 3s ease;
}
</style>
</head>
<body>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card card-primary card-outline">
<div class="card-body">
<div id="quest">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
var correctCards = 0;
var stringtext = [
[
"Is",
"there",
"any",
"chance",
"you'd",
"be",
"interested in a",
"movie",
"tonight",
"?"
]
];
var label = [
[
"Is",
"tonight",
"there",
"interested in a",
"be",
"you'd",
"movie",
"chance",
"any",
"?"
]
];
$(init());
function init() {
correctCards = 0;
$("#cardPile").html("");
$("#cardSlots").html("");
for (var x = 0; x < stringtext.length; x++) {
var numdiv = x;
var divs = "#cardPile_" + numdiv + " div";
$("#quest").prepend(
$('<div class="row mb-auto pb-1" id="row_' + numdiv + '"></div>')
);
$("#row_" + numdiv).prepend(
$(
'<div class="col-lg-6 d-flex flex-row" id="cardSlots_' +
numdiv +
'"></div>'
)
);
for (var i = 0; i < 10; i++) {
$('<div class="ml-1 mr-1 divslot"></div>')
.data("number", stringtext[x][i])
.appendTo("#cardSlots_" + numdiv)
.droppable({
accept: divs,
hoverClass: "hovered",
drop: handleCardDrop
});
}
$("#row_" + numdiv).prepend(
$(
'<div class="col-lg-6 d-flex flex-row" id="cardPile_' +
numdiv +
'"></div>'
)
);
for (var i = 0; i < 10; i++) {
$(
'<div class="ml-1"><button type="button" class="btn btn-primary btn-sm">' +
label[x][i] +
"</button></div>"
)
.data("number", label[x][i])
.attr("id", "card " + label[x][i])
.appendTo("#cardPile_" + numdiv)
.draggable({
stack: divs,
cursor: "move",
revert: false,
cancel: false,
opacity: 0.9,
helper: "clone"
});
}
}
}
function handleCardDrop(event, ui) {
var slotNumber = $(this).data("number");
var cardNumber = ui.draggable.data("number");
ui.draggable.find("button").addClass("btn-success");
ui.draggable.find("button").attr("title", cardNumber);
$(this).addClass("isDropped");
ui.draggable.draggable("disable");
$(this).droppable("disable");
ui.draggable.css("width", `${ui.draggable.find("button").css("width")}`);
ui.draggable.find("button").appendTo($(this));
}
});
</script>
</html>
Thank you in advance.
