Register Register Member Login Member Login Member Login 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 มีแล้ว ขอวิธีดึงไปโชว์)

 



Topic : 108035



โพสกระทู้ ( 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







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-05-01 17:42:27 By : Meen2007 View : 1483 Reply : 1
 

 

No. 1



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



สถานะออฟไลน์
Twitter Facebook Blogger

ใส่ 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 มีแล้ว ขอวิธีดึงไปโชว์)
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







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

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่