របៀប Drag និង Drop នៅក្នុង HTML5

• Sross Viech


• 10 Oct 2016

Drag and Drop មានន័យថាការទាញនិងទំលាក់ហើយវាគឺជាសារៈប្រយោជន៏មួយសំរាប់អ្នកប្រើប្រាស់នៅលើគេហទំព័រដែលត្រូវបានសរសេរដោយប្រើប្រាស់ភាសា HTML5 ដែលវាមានលក្ខណៈងាយស្រួលនៅក្នុងការ ថតចម្លង (copy)។

ម្យ៉ាងវិញទៀតនោះវារឹតតែមានភាពងាយស្រួលទៅទៀតនៅពេលដែលអ្នកចង់ផ្លាស់ប្ដូរទីតាំងរបស់ធាតុអ្វីមួយគឺគ្រាន់តែចុចទៅលើ mouse ឲ្យជាប់រួចទាញទៅដាក់ត្រង់កន្លែងដែលអ្នកចង់ដាក់នោះជាការស្រេច ។

១. ដំនើរការរបស់ Drag and Drop :

1. ការបង្កើតឲ្យមានចលនាទាញ (Draggable)

ដើម្បីបង្កើតចលនាទាញ (draggable) ទៅលើរូបភាព១ គឺយើងត្រូវប្រើ code ដូចខាងក្រោម៖

• កំនត់ចលនា(event) ឲ្យទៅProperty មួួយគឺ dragstart ដើម្បីផ្ទុកទិន្នន័យមុនពេលធ្វើការទាញ
•  ត្រូវដាក់Propery មួយគឺ draggable ឲ្យស្មើ true

2. ការទំលាក់កម្មបទ (Dropping Object)

• ចលនា dragenter គឺជាProperty មួយដែលប្រើសំរាប់កំនត់ការដាក់កម្មបទ (object)  ប៉ុន្តែក្រោយពេលដែលដាក់រួចយើងមិនអាចទាញកម្មបទនោះទៅកន្លែងដើមបានទេ ។
• ចលនា dragover គឺជាProperty មួយដែលប្រើសំរាប់កំនត់ការដាក់កម្មបទ ហើយយើងអាចដាក់កម្មបទនោះមកកន្លែងដើមវិញបាន ។
• ចលនា drop គឺជាProperty មួយដែលកំនត់ទីតាំងពិតប្រាកដសំរាប់ដាក់កម្មបទនោះ ។

3. ការសរសេរ Code

– index.html

– dragdrop.css

– dragdrop.js

២. លទ្ធផល