<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Basic Demo</title> <!-- jQuery / jQuery UI --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <!-- jQuery Touch Punch - Enable Touch Drag and Drop --> <script src="../core/vendor/jquery.touch-punch.min.js"></script> <!-- jQuery.Shapeshift --> <script src="../core/jquery.shapeshift.js"></script> <!-- CSS --> <style> .container { border: 1px dashed #CCC; position: relative; } .container > div { background: #AAA; position: absolute; height: 100px; width: 100px; } .container > .ss-placeholder-child { background: transparent; border: 1px dashed blue; } </style> <!-- Javascript --> <script> $(document).ready(function() { $(".container").shapeshift(); }) </script> </head> <body> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </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>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
