|
 |
| |
[Drag Drop] พอจะมีวิธี save ตำแหน่ง drag ที่วางในตารางไหมครับ |
| |
 |
|
|
 |
 |
|
Code ครับ
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<style>
#area {
float: center;
width: 1024px;
height: 400px;
background-image: url("assets/images/table.png");
}
#drop {
width: 67px;
height: 50px;
float: left;
}
#areatable {
position: absolute;
top: 30px;
left:67px;
width: 939px;
height: 351px;
border: 0.2px solid black;
background-image: url("assets/images/table2.png");
}
#table1,
tr,
th,
td {
width: 66px;
height: 30px;
border: 0.5px solid black;
text-align: center;
background: rgb(218, 218, 255);
}
#table2 {
height: 50px;
width: 66px;
border: 0.5px solid black;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
</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>
<nav class="navbar navbar-expand-lg navbar-drak bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<h2 style="text-align: center;">การจัดตารางสอน</h2>
<p style="text-align: center;">สาขาวิชาเทคโนโลยีมัลติมีเดีย</p>
<div style="position: absolute;
left: 13%;
top: 130px;">
<div id="area">
<div id="areatable">
<div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
</div>
</div>
<div style="position: absolute;
left: 200px;
top: 90%;">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject01.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="50"
;>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject02.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="200" height="50"
;>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject03.jpg" draggable="true" ondragstart="drag(event)" id="drag3" width="300" height="50"
;>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject04.jpg" draggable="true" ondragstart="drag(event)" id="drag4" width="400" height="50"
;>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject05.jpg" draggable="true" ondragstart="drag(event)" id="drag5" width="500" height="50"
;>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="assets/images/subject/subject06.jpg" draggable="true" ondragstart="drag(event)" id="drag6" width="600" height="50"
;>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2018-03-02 13:10:40 |
By :
daimond2539 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 05
|
