For Android device For iOS device
២៨
តុលា

ការទាញ​រូបភាព ដើម្បី​ប្ដូរទីតាំងជាមួយ HTML5 (drag and drop)

រៀបរៀងអត្ថបទដោយ៖ លោក សំ រិទ្ឋី ត្រួត​ពិនិត្យ និងកែ​សម្រួល​អត្ថបទដោយ៖ លោក ហេង ពេងលាប

Interface គឺជា​ផ្នែក​មួយ​យ៉ាង​សំខាន់ ដែល​ជាវិធីសាស្រ្ដធ្វើ​ឲ្យ​យើងមានទំនាក់ទំនង​ជាមួយនឹង website ។ បច្ចេកវិទ្យា និង​តួនាទី​ជា​ច្រើន​ត្រូវបាន​កែប្រែ ដើម្បី​អ្នក​ប្រើ​ប្រាស់​មានភាព​ងាយស្រួល ក្នុង​ការ​បង្កើត web interface HTML5 បានកែប្រែ និងមាន​តួនាទី​ជា​ច្រើន​នៅលើ Client side ​ដែល​វាបានកាត់​បន្ថយ​ការ​សរសេរ​កូដ​នៅលើ script ។ វាបាន​ផ្ដល់​របៀបដ៏ល្អមួយ​ក្នុង​ការផ្លាស់ប្ដូរទីតាំង​រូបភាព ដោយការទាញលើ​រូបភាព ហើយពេលនេះអាន-ANT សូមលើកយក ពីរបៀបមួយនេះមក​បង្ហាញ​ជូន​លោកអ្នក ក្នុង​កម្រិត Basic មួយ ។ (ការទាញ​រូបភាព​នេះ​ខ្ញុំ​សុំនិយាយថា Drag and Drop) ។

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

កាលពីមុន  function drag and drop នៅ​ក្នុង HTML4 អ្នកត្រូវ​សរសេរ​កូដ JavaScript ជា​ច្រើន ដើម្បី​ឲ្យ​វា​ដំណើរ​ការ ។ ឥឡូវ HTML5 បាន​ផ្ដល់ Drag and Drop ជា API ​ដែល​ដំណើរ​ការ​លើ browser ដូច​ខាងក្រោម​៖

· Internet Explorer (IE) 9+

· Firefox

· Opera

· Chrome

· Safari

​ចំណាំ​៖ Drag and Drop មិន​ដំណើរ​ការ​នៅលើ Safari 5.1.7 និង ជំនាន់​មុនៗ​នោះទេ ។

​ដំណាក់​កាលនៃការ​បង្កើត​៖

១. ​បង្កើត div elements ចំនួន ២នៅ​ក្នុង <body> tag

២. នៅក្នង div ទី១ បង្កើត <img> tag ដូច​ខាងក្រោម​៖

· draggable នៅ​ក្នុង <img> tag គឺធ្វើ​ឲ្យ​រូបភាព​អាចទាញបាន ។

· ondragstart នៅ​ក្នុង <img> tag នេះដែរ គឺជា Event ​ដែល​ហៅ function drag (event) នៅ​ក្នុង JavaScript មក​ប្រើ​ប្រាស់ ។

៣. ​សរសេរ​កូដ JavaScript នៅកន្លែងណា​ក៏​បានដូច​ខាងក្រោម​៖

· នៅបន្ទាត់ទី ១៥ ដល់ ១៧ មាន​តួនាទី​ចាប់យក data ពី Element ​ដែល​យើង​កំពុង​តែទាញ

· នៅបន្ទាត់ទី១៩ ដល់ ២១ មានន័យថា​អនុញ្ញាត​ឲ្យ​ដាក់​រូបភាព​ទៅកាន់​ element ​ដែល​យើងចង់ដាក់

· នៅបន្ទាត់ទី ២៣ ដល់ ២៧ មាន​តួនាទី​ចាប់យក data ​ដែល​មានទាញមក ហើយ​បញ្ចូល​វា​ទៅកាន់​ element ថ្មី

៤. ដាក់ event ទៅ​ឲ្យ div elements ​ទាំងពីរ ដូច​ខាងក្រោម​៖

· Event ondrop គឺជាការហៅ function drop () មក​ប្រើ​ប្រាស់ ដើម្បី​ដាក់​រូបភាព​បាន

· Event ondragover គឺជាការហៅ function allowDraopstatus () មក​ប្រើ​ប្រាស់ ដែល​យើងទាញឆ្លងពី element មួយ ទៅ element មួយ ។

​ខាងក្រោម​ជា​លទ្ធផល​នៅពេល​ដំណើរ​ការ​នៅលើ Browser

 

​កម្មវិធី ANTLearner គឺជា​កម្មវិធី​បង្កើត​ឡើង​ក្នុង​គោល​បំណង​ចែក​រំលែក​ចំណេះដឹង​ទាក់ទងនឹង​បច្ចេកវិទ្យា​

🤝 សម្រាប់​លោកអ្នក​ដែល​ចង់​ដំឡើង​កម្មវិធី ANTLearner សម្រាប់ Windows សូម​ចូលរួម Telegram÷ https://t.me/AntTechnologyTrainingCenter
📲 ​សម្រាប់​លោកអ្នក​ចង់​ដំឡើង​កម្មវិធី ANTLearner សម្រាប់ Android https://bit.ly/3qhYCJf

♦ សម្រាប់​វគ្គ​សិក្សា​នៅអាន-ANT សូមចូល​ទៅកាន់​ http://training.antkh.com/

♦ សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

 សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
♦ ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា