|
 |
| |
จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์) |
| |
 |
|
|
 |
 |
|
ใส่ id ให้รูปภาพ แล้วบันทึกตำแหน่งของรูปภาพลงฐานข้อมูล หรือ ทำ AJAX
Code (HTML)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Demo</title>
<!-- jQuery / jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery Touch Punch - Enable Touch Drag and Drop -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- jQuery.Shapeshift -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.shapeshift/2.0.0/jquery.shapeshift.min.js"></script>
<!-- CSS -->
<style>
.container {
border: 1px dashed #CCC;
position: relative;
}
.container > div {
background: #AAA;
position: absolute;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
vertical-align: middle;
}
.container > .ss-placeholder-child {
background: transparent;
border: 1px dashed blue;
}
</style>
<!-- Javascript -->
<script>
$(document).ready(function() {
$(".container").shapeshift();
$("#btn").on("click", function(event) {
var toFront = '';
$('.container').each(function(i, el) {
toFront += '[';
$(el).children().each(function(j, ele) {
if (j < $(el).children().length - 1) {
toFront += $(ele).attr('id') + ', ';
} else {
toFront += $(ele).attr('id');
}
});
toFront += '], ';
});
// เก็บตำแหน่ง element ด้วย id ไว้ใน string แบบ array
toFront = toFront.slice(0,-2);
// ใช้ toFront ทำ AJAX ไปยัง page ที่แสดง Front-end
// หรือบันทึกลงฐานข้อมูล
alert(toFront);
});
})
</script>
</head>
<body>
<div class="container">
<div id="img-01">1</div>
<div id="img-02">2</div>
<div id="img-03">3</div>
<div id="img-04">4</div>
<div id="img-05">5</div>
<div id="img-06">6</div>
<div id="img-07">7</div>
<div id="img-08">8</div>
</div>
<div class="container">
<div id="img-09">9</div>
<div id="img-10">10</div>
<div id="img-11">11</div>
<div id="img-12">12</div>
<div id="img-13">13</div>
<div id="img-14">14</div>
<div id="img-15">15</div>
<div id="img-16">16</div>
</div>
<br>
<input type="button" id="btn" value="save">
</body>
<script>/*
https://www.thaicreate.com/php/forum/108035.html
*/</script>
</html>
https://www.w3schools.com/code/tryit.asp?filename=GF0T3IV70S7A
|
 |
 |
 |
 |
| Date :
2020-05-29 23:58:02 |
By :
PhrayaDev |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 04
|
