HTML5 Drag&Drop

By llun on September 19, 2011 in ของเล่น, ภาษา

เมื่อคืนช่วงที่เขียนเรื่อง IAAS/PAAS จริงๆ มีเรื่องนี้อยู่ในหัวด้วย มันมาตั้งแต่ตอนทำ Scrumboard ให้ลาก Task ได้แต่ไม่มีเวลารวบรวมซักที ช่วงเช้ายังว่างๆ ไม่มีใครมาเลยจดไว้ก่อนละกัน

วิธีการใช้งาน HTML5 Drag&Drop แทบจะเหมือน Flex เป๊ะชื่อฟังก์ชั่นหรือ event นี่ลอกมาแทบจะไม่ต่าง (หรือจริงๆ Adobe อาจจะเป็นคนผลักมันออกมาเป็น Standard) Event พื้นฐานก็มี (@plutoniix แย้งมาตาม comment ว่ามาจาก MS ต่างหาก)
1. dragstart: ใช้กับ DOM ที่จะลากเพื่อบอกว่า DOM นี้มีคนกดลากแล้วนะ
2. dragend: ใช้กับ DOM ที่ลากไปมาได้เหมือน dragstart เกิดเมื่อตอนปล่อยเม้าส์จาก DOM ที่ลากไปมา
3. dragover: ใช้กับ DOM ที่จะเป็นตัวรับ DOM ที่ลากไปมา เกิดตอน DOM อื่นถูกลากมาเหนือ DOM ที่ bind event
4. dragenter: ใช้กับ DOM ที่จะเป็นตัวรับ DOM ที่ลากไปมา เกิดตอน DOM อื่นถูกลากเข้ามาใน DOM ที่ bind event
5. dragleave: ใช้กับ DOM ที่จะเป็นตัวรับ DOM ที่ลากไปมา เกิดตอน DOM อื่นถูกลากออกจาก DOM ที่ bind event
6. drop: ใช้กับ DOM ที่จะเป็นตัวรับ DOM ที่ลากไปมา เกิดตอนปล่อยเม้าส์จาก DOM ขณะอยู่เหนือ DOM ที่ bind event
จาก list event ด้านบนก็เลยต้องแบ่ง DOM เป็นสองแบบคือ ตัวที่จะถูกลาก กับ ตัวที่จะรับตัวถูกลาก
คราวนี้นอกจากจะลากได้แล้ว มันยังสามารถส่งข้อมูล เพื่อใช้บอกตอน drop ว่าทำอย่างไรต่อโดยเก็บผ่าน event attribute ที่ชื่อว่า originalEvent.dataTransfer
```
var lenElement = document.querySelector('#len');
lenElement.addEventListener('dragstart', function (event) {
  var dataTransfer = event.originalEvent.dataTransfer;
  dataTransfer.setData('Text', 'Lens Macro');
});

var cameraElement = document.querySelector('#camera');
cameraElement.addEventListener('drop', function (event) {
  var dataTransfer = event.originalEvent.dataTransfer;
  var len = dataTransfer.getData('Text');
  cameraElement.appendChild(len);
});
```
คำเตือน: setData ตอนนี้ใส่ key ได้แต่ ‘Text’ เท่านั้นไม่งั้น Chrome จะ drop ไม่ได้ตอนทำอันนี้ก็งงอยู่นานว่าทำไม Browser อื่นไม่มีปัญหาแต่ Chrome ดันทำงานไม่ถูกจนทำตามตัวอย่างเป๊ะๆ ถึงได้ แต่ในอนาคตคิดว่าคงถูกแก้ให้ใช้ได้เหมือน Safari/Firefox

คิดไปเองว่า dataTransfer.setData รับเป็น (key, value) แต่จริงๆ แล้วมันรับเป็น (format, value) ต่างหาก format มีสองแบบคือ Text และ URL เพราะงั้นถ้าใส่ format อื่นนอกจากนี้ Chrome ก็จะไม่รับ drop^[1]

นอกจาก Drag&Drop ที่มาใน HTML5 แล้วก็ยังมีอย่างอื่นที่เล่นผ่านไปอีกเช่น Application Cache, Web Storage, Web Socket แถมยังมี meta data พิเศษของ Safari ใน iOS ที่ทำให้ Web ไม่มีขอบจนเหมือนเป็น Application จริงๆ เอาพวกนี้มารวมๆ กันนี่แหละทำให้ Kindle Reader ทำงานได้เหมือน App Native ใน iPad.

อ้างอิง: