เพิ่มการลาก & วางเว็บไซต์อย่างง่ายดายด้วย Dragula

กำลังมองหาห้องสมุดฟรีเพื่อ จัดการกับคุณสมบัติการลากและวาง? แล้วก็ Dragula เป็นทรัพยากรเดียวที่คุณต้องการ.

สคริปต์ฟรีนี้ช่วยให้คุณ เพิ่มคุณสมบัติการลากและวางสำหรับองค์ประกอบใด ๆ บนหน้าของคุณ. ซึ่งรวมถึงการสนับสนุน React & AngularJS frameworks พร้อมกับ vanilla JavaScript.

Dragula ติดตั้งง่ายสุด ๆ และมาพร้อมกับ ทริกเกอร์ที่กำหนดเองจำนวนมากสำหรับพฤติกรรมของผู้ใช้. ซึ่งหมายความว่าคุณสามารถใช้ฟังก์ชันของคุณเองหลังจากที่ผู้ใช้ลากรายการคลิกที่รายการหรือจัดเรียงส่วนใด ๆ ของหน้าใหม่.

หากคุณลองดูตัวอย่างสดคุณจะพบ ตัวอย่างโค้ดบางส่วน, พร้อมด้วย ตัวอย่างที่ใช้งานได้.

การตั้งค่า Dragula ต้องการเพียงไฟล์ JavaScript เดียว เพื่อให้มันทำงาน แม้ว่าตัวเลือกพิเศษอาจทำให้สับสนเล็กน้อย.

ตัวอย่างเช่นสมมติว่าคุณมีตู้คอนเทนเนอร์สองตู้, #ซ้าย และ #ขวา, ที่คุณต้องการสนับสนุนรายการที่สามารถลากได้ คุณจะต้อง เพิ่มคอนเทนเนอร์เหล่านี้ไปยังฟังก์ชัน Dragula ด้วยตนเอง เพื่อสนับสนุนวิธีการลากและวาง.

หากคุณไม่มีความเข้าใจพื้นฐานของการพัฒนาส่วนหน้าอย่างเด็ดขาดคุณจะต้องพยายามใช้ Dragula แต่ธุรกรรมซื้อคืนของ GitHub นั้นมีมากมาย ตัวอย่างที่ดีที่คุณสามารถติดตามได้ และแม้กระทั่ง ตัวอย่างโค้ดที่คุณสามารถคัดลอกได้.

นี่คือตัวอย่างหนึ่งจากเอกสาร GitHub สำหรับวิธีการ กำหนดเป้าหมายคอนเทนเนอร์ทั้งสอง (ซ้ายและขวา):

 dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); 

หมายเหตุหากคุณดูเพิ่มเติมในหน้า GitHub คุณจะพบ รายการตัวเลือกมากมาย คุณสามารถส่งผ่านไปยังฟังก์ชั่นนี้.

คุณสามารถเลือก ว่าจะคัดลอกหรือย้ายรายการ, คอนเทนเนอร์ใดที่รองรับรายการที่ถูกลาก และแม้กระทั่ง ฟังก์ชั่นการโทรกลับ ที่ทำงานผ่านพฤติกรรมผู้ใช้ที่แตกต่างกันเช่น:

• โฮเวอร์เหนือคอนเทนเนอร์
• เหตุการณ์คลิกและลากเริ่มต้น
• วางเหตุการณ์
• ปล่อยองค์ประกอบออกจากขอบเขต
• การโคลนองค์ประกอบ / คอนเทนเนอร์โดยการลาก

ห้องสมุดนี้ จะใช้งานเริ่มต้น แต่ถ้าคุณคุ้นเคยกับจาวาสคริปต์ก็ควรเป็นเกมที่เล่นง่าย.

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