ปัญหาการลากขอบซ้ายของ div และวิธีแก้ปัญหาเขียนโค้ด

นักพัฒนาซอฟต์แวร์รายหนึ่งได้ออกมาแชร์ปัญหาผ่านแพลตฟอร์ม Dev.to เกี่ยวกับการเขียนฟังก์ชัน JavaScript เพื่อจัดการกับองค์ประกอบหน้าเว็บ โดยเฉพาะความพยายามในการลากขอบซ้ายของ div เพื่อปรับขนาดไปพร้อมกับการเปลี่ยนตำแหน่ง

ในโค้ดต้นฉบับ เงื่อนไขเช่น if (g_strGrabbedBorder == "") ถูกใช้งานเพื่อบ่งบอกว่าผู้ใช้งานกำลังลาก div ที่สร้างขึ้นแบบไดนามิกด้วยเมาส์ ซึ่งตัวแปรนี้เป็นตัวแปรสากลที่ถูกกำหนดค่าผ่านตัวจัดการเหตุการณ์คลิกปุ่มซ้ายของเมาส์ ซึ่งการลากย้ายตำแหน่งทั่วไปนั้นทำงานได้อย่างสมบูรณ์แบบไม่มีปัญหา

อย่างไรก็ตาม ปัญหาที่ซับซ้อนกว่านั้นเกิดขึ้นเมื่อต้องการทำทั้งการเปลี่ยนตำแหน่ง (reposition) และการปรับขนาด (resize) ของ div ไปพร้อมกันในเวลาเดียวกัน เมื่อขอบด้านซ้ายขยับไปทางขวา ความกว้างควรจะลดลงพร้อมกับตำแหน่งที่เลื่อนขวาตามไปด้วย

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

นักพัฒนาได้ระบุว่า การพยายามเปลี่ยนแปลงค่า div.left และ div.width พร้อมกัน ส่งผลให้องค์ประกอบบนหน้าเว็บแสดงผลผิดเพี้ยนไปอย่างมาก เช่น เมื่อพยายามลากขอบซ้ายไปทางขวา แต่ขอบด้านขวากลับขยับหนีไปทางขวาเร็วกว่า ทำให้ขนาดความกว้างของ div เพิ่มขึ้นแทนที่จะลดลงตามที่ตั้งใจไว้

ปัญหาดังกล่าวทำให้ผู้พัฒนาเกิดความสับสนและคิดหาวิธีแก้ไม่ออก จนต้องนำมาตั้งกระทู้สอบถามความคิดเห็นและแลกเปลี่ยนแนวทางแก้ไขในชุมชนออนไลน์ของนักพัฒนาซอฟต์แวร์

ที่มา: Dev.to