ต้องการ เลือก ข้อมูลใน select tag แล้ว block เปลี่ยนตำแหน่งไปตามนั้น

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

bankjittapol
PHP Super Member
PHP Super Member
Posts: 227
Joined: 21/10/2019 10:19 am

ต้องการ เลือก ข้อมูลใน select tag แล้ว block เปลี่ยนตำแหน่งไปตามนั้น

Post by bankjittapol » 04/11/2019 11:51 am

เมื่อเราเลือก แผนการเล่น แล้วตำแหน่ง block จะเปลี่ยนตาม ขอคำแนะนำหน่อยครับบบ

เลือกแผน 4-3-3
111111.png
111111.png (3.85 KiB) Viewed 63 times
แล้วผลลัพธ์จะได้
Image

Code: Select all

  <style>
         .draggable {
            width: 5%;
            height: 2%;
            background-color: black;
            color: white;
            /* border-radius: 0.75em; */
            padding: 2%;
            position: absolute;
         }
         .drag-container {
           display: inline-block;
           width: 700px;
           height: 700px;
           border: 1px solid black;
         }
      </style>

Code: Select all

   <div class="drag-container" align="center" >
      <div class="draggable" style="transform: translate(300px, 630px);" data-x="300" data-y="630">
         <p>Block 1</p>
      </div>
      <div class="draggable" style="transform: translate(20px, 500px);" data-x="20" data-y="500">
         <p>Block 2</p>
      </div>
      <div class="draggable" style="transform: translate(200px, 500px);" data-x="200" data-y="500">
         <p>Block 3</p>
      </div>
      <div class="draggable" style="transform: translate(400px, 500px);" data-x="400" data-y="500">
         <p>Block 4</p>
      </div>
      <div class="draggable" style="transform: translate(580px, 500px);" data-x="580" data-y="500">
         <p>Block 5</p>
      </div>
      <div class="draggable" style="transform: translate(110px, 300px);" data-x="110" data-y="300">
         <p>Block 6</p>
      </div>
      <div class="draggable" style="transform: translate(300px, 300px);" data-x="300" data-y="300">
         <p>Block 7</p>
      </div>
      <div class="draggable" style="transform: translate(490px, 300px);" data-x="490" data-y="300">
         <p>Block 8</p>
      </div>
      <div class="draggable" style="transform: translate(110px, 100px);" data-x="110" data-y="100">
         <p>Block 9</p>
      </div>
      <div class="draggable" style="transform: translate(300px, 100px);" data-x="300" data-y="100">
         <p>Block 10</p>
      </div>
      <div class="draggable" style="transform: translate(490px, 100px);" data-x="490" data-y="100">
         <p>Block 11</p>
      </div>
</div>
 

Code: Select all

  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

      <script type="text/javascript">
                        interact('.draggable').draggable({
                                autoScroll: true,
                                onmove: window.dragMoveListener,
                                restrict: {
                                  restriction: 'parent',
                                  elementRect: {
                                    top: 0,
                                    left: 0,
                                    bottom: 1,
                                    right: 1
                                  }
                                },
                                onmove: function (event) {
                                        var target = event.target;
                                        var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
                                        var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
                                        target.style.webkitTransform =
                                                target.style.transform =
                                                'translate(' + x + 'px, ' + y + 'px)';
                                        target.setAttribute('data-x', x);
                                        target.setAttribute('data-y', y);
                                }
                        });
      </script>

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10457
Joined: 18/04/2012 9:39 am

Re: ต้องการ เลือก ข้อมูลใน select tag แล้ว block เปลี่ยนตำแหน่งไปตามนั้น

Post by tsukasaz » 04/11/2019 12:02 pm

น่าจะต้องเก็บข้อมูลตำแหน่งไว้ก่อน สมมุติว่ามีหลายๆ แผน อาจจะสร้างตารางมาเก็บแผน กับ ตำแหน่งที่จะวาง

เวลาที่ผู้ใช้เลือกตัว select แผนมา ก็ไปดึงข้อมูลจากตารางที่เก็บมาใช้ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Post Reply

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: Google Adsense [Bot] and 10 guests