Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์)

จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์)

เริ่มหัวข้อใหม่

meen

โพสกระทู้ ( 88 )
บทความ ( 0 )

จัดเพจหลังร้าน(Backend) ด้วยรูปแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้าน โดยที่ผู้ชมไม่สามารถ Drag & Drop เปลี่ยนตำแหน่งที่เราจัดไว้หน้าเพจได้ ต้องเขียนดึงไปโชว์อย่างไร ผมใช้โค้ด jquery.shapeshift DEMO : http://mcpants.github.io/jquery.shapeshift/
ดาวน์โหลดที่ https://github.com/McPants/jquery.shapeshift

ใช้แบบ basic.html
โค้ด
Code

<!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>

ตัวโค้ด basic.html ด้านบน จะแสดงออกมาเป็นบล็อคๆ ในส่วนของ <div class="container"> <div></div> สามารถสลับตำแหน่ง ซ้าย-ขวา ขึ้นลงได้ตามสะดวก จะเอาไปลองใช้จัดกับ แกลเลอรี่รูปภาพ แต่ถ้าเอาไปใช้แบบด้านบนตรงๆ ผู้ชมสามารถจับสลับเปลี่ยนตำแหน่งเองได้ คือไม่ต้องการให้ผู้ชมจัดตำแหน่งใดๆได้ที่หน้าเพจ จึงต้องทำหน้าเพจขึ้นมาอีกเพจ เพื่อดึงตัวที่เป็น basic.html หลังร้านไปโชว์ ขอทราบวิธีดึง basic.html ไปโชว์ยังเพจใหม่ โดยที่เป็นแบบ fix ตายตัวไม่สามารถสลับได้ จะสลับ Drag & Drop ได้เฉพาะหลังร้าน (Backend) basic.html เท่านั้น

Tag : PHP, HTML/CSS, JavaScript

Date : 2014-05-01 17:42:27

By : Meen2007

View : 1480

Reply : 1

No. 1

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

ใส่ 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

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์)

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

จัดเพจหลังร้านแบบ Drag & Drop box แล้วให้ไปโชว์หน้าร้านยังไง (โค้ด Drag & Drop มีแล้ว ขอวิธีดึงไปโชว์)