I want to have a list of draggable objects that I can drag and drop into a ranked list.
I found what I want to use as a frame work at https://codepen.io/kaleem78/pen/eKvzWY
I've provided the code below. For whatever reason it won't work unless it's on codepen. When I use this code anywhere else the items won't drag and drop into the ranked containers. Can anyone help me understand why?
Or even if you could provide notes to help me understand what each line of the script is doing.
Or if you know where I can find another or more examples of a drag and drop ranking list that I could experiment with.
Any help would be much appreciated! Thank you!
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function () {
item_height = $(".item").outerHeight(true);
height = (item_height + 2) * ($(".item").length + 1);
$(".source-container,.destination-container").height(height);
$(".source .item").draggable({
revert: "invalid",
start: function () {
$(this).data("index", $(this).parent().index());
}
});
$(".destination").droppable({
drop: function (evern, ui) {
if ($(this).has(".item").length) {
if (ui.draggable.parent().hasClass("source")) {
index = ui.draggable.data("index");
ui.draggable
.css({ left: "0", top: "0" })
.appendTo($(".source").eq(index));
} else {
ui.draggable.css({ left: "0", top: "0" }).appendTo($(this));
index = ui.draggable.data("index");
$(this).find(".item").eq(0).appendTo($(".destination").eq(index));
}
} else {
ui.draggable.css({ left: "1px", top: "1px" });
ui.draggable.appendTo($(this));
$(".destination").removeClass("ui-droppable-active");
}
}
});
$(".source").droppable({
accept: function (draggable) {
return $(this).find("*").length == 0;
},
drop: function (event, ui) {
ui.draggable.css({ left: "0", top: "0" }).appendTo($(this));
}
});
});
</script>
<style>
h3 {
max-width: 700px;
margin: 30px auto;
}
.container {
max-width: 700px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
height: 300px;
display: flex;
justify-content: space-between;
}
.source-container {
width: 300px;
border: 1px solid #ccc;
}
.item {
height: 30px;
border: 1px solid #ccc;
margin: 2px;
background-color: lightyellow;
cursor: move;
}
.item p {
text-align: center;
margin: 5px;
}
.source {
position: relative;
border: 1px solid #ccc;
margin: 5px;
height: 36px
}
.destination-container {
width: 300px;
border: 1px solid #ccc;
}
.destination {
height: 36px;
border: 1px solid #ccc;
margin: 5px;
background: #f1f1f1;
border-left: 30px solid #ccc;
position: relative;
}
.ui-droppable-active {
border-color: #bbb;
}
.ui-droppable-hover {
background: #ddd;
}
.destination span {
position: absolute;
z-index: 2;
padding: 9px;
left: -28px;
}
.ui-draggable-dragging {
z-index: 999 !important;
}
</style>
<body>
<div class='container'>
<div class="source-container">
<div class='source'>
<div class='item'>
<p>Item 1</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 2</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 3</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 4</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 5</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 6</p>
</div>
</div>
<div class='source'>
<div class='item'>
<p>Item 7</p>
</div>
</div>
</div>
<div class='move-back'>
</div>
<div class='destination-container'>
<div class="destination" id="dest1">
<span>1</span>
</div>
<div class="destination" id="dest2">
<span>2</span>
</div>
<div class="destination" id="dest3">
<span>3</span>
</div>
<div class="destination" id="dest4">
<span>4</span>
</div>
<div class="destination" id="dest5">
<span>5</span>
</div>
<div class="destination" id="dest6">
<span>6</span>
</div>
<div class="destination" id="dest7">
<span>7</span>
</div>
</div>
</div>
</body>
</html>
I've tried to have the script converted into javascript without the $'s because I think that's the issue, but I may be wrong. I've also tried to run a debugger but that doesn't work either. I've tried everything I know how to do which is limited.