100 lines
4.8 KiB
HTML
100 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="inventory-style.css" />
|
|
<!--<script src="Inventory/inventory.js"></script>-->
|
|
<script src="jquery-3.3.1.min.js"></script>
|
|
<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>
|
|
<div class="inventory-table" id="personal-inventory">
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot0">
|
|
<div class="inventory-slot">1</div>
|
|
<div class="inventory-item" draggable="true" ondragstart="drag(event)" id="item1">Hamburger</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot1">
|
|
<div class="inventory-slot">2</div>
|
|
<div class="inventory-item" draggable="true" ondragstart="drag(event)" id="item2" style="background-color:yellow;">Cheeseburger</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot2">
|
|
<div class="inventory-slot">3</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot3">
|
|
<div class="inventory-slot">4</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot4">
|
|
<div class="inventory-slot">5</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot5">
|
|
<div class="inventory-slot">6</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot6">
|
|
<div class="inventory-slot">7</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot7">
|
|
<div class="inventory-slot">8</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot8">
|
|
<div class="inventory-slot">9</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot9">
|
|
<div class="inventory-slot">10</div>
|
|
<div class="inventory-item" draggable="true" ondragstart="drag(event)" id="item3" style="background-color:green;">Chickenburger</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot10">
|
|
<div class="inventory-slot">11</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot11">
|
|
<div class="inventory-slot">12</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot12">
|
|
<div class="inventory-slot">13</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot13">
|
|
<div class="inventory-slot">14</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot14">
|
|
<div class="inventory-slot">15</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot15">
|
|
<div class="inventory-slot">16</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot16">
|
|
<div class="inventory-slot">17</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot17">
|
|
<div class="inventory-slot">18</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot18">
|
|
<div class="inventory-slot">19</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot19">
|
|
<div class="inventory-slot">20</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |