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

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

dnd1

dragdrop.css

dnd2

dragdrop.js

dnd3

២. លទ្ធផល

dnd4

dnd5