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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

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

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

โดย tsukasaz » 04/11/2019 12:02 pm

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

เวลาที่ผู้ใช้เลือกตัว select แผนมา ก็ไปดึงข้อมูลจากตารางที่เก็บมาใช้ครับ

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

โดย bankjittapol » 04/11/2019 11:51 am

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

เลือกแผน 4-3-3
111111.png
111111.png (3.85 KiB) Viewed 1679 times
แล้วผลลัพธ์จะได้
รูปภาพ

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

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

ข้างบน