Khmer Web: Drag & Drop

Drag & Drop ជាបច្ចេកទេសដ៏ថ្មីស្រឡាងមួយទៀតនៅក្នុង HTML5 ដែលអនុញ្ញាតអោយយើងអាចចុចចាប់ទាញធាតុ HTML ផ្សេងៗ ពីកន្លែងមួយទៅកន្លែងមួយទៀត បានយ៉ាងរហ័សទាន់ចិត្ត។ មួយវិញទៀត ស្ទើរគ្រប់ browser ធំៗទាំងឡាយ សុទ្ធតែត្រូវបានបញ្ចូលបច្ចេកទេសថ្មីនេះទាំងអស់។

ជាកិច្ចចាប់ផ្តើម ដើម្បីចុចចាប់ទាញធាតុ HTML ណាមួយ យកទៅទំលាក់ទៅក្នុងធាតុ HTML ណាមួយផ្សេងទៀត យើងចាំបាច់ត្រូវសរសេរកម្មវិធីដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">

	

   <script>
     function allowDrop(ev) {
        ev.preventDefault();
      }
      
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }
      
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZMlTzoryjTgxkB-eOs03HG9NfWSRfaDftdTm4VsTgbykji1BrFTHOGq842R5kZGJ9U7WmQKGxrvAT4Fs44Riw93omzwKRDti9O04i4RU-wpqE2KXcqU8Yscr_IqYB8kI2FSWvg0LkWA/s1426/download.png" 
      draggable="true" ondragstart="drag(event)" width="336" height="69" />
  </body>
</html>

ដូចនេះ យើងឃើញថា ដំបូងគេបង្អស់ យើងចាំបាច់ត្រូវធ្វើអោយរូបដែលត្រូវចុចទាញ អាចចុចទាញបាន ដោយកំណត់ attribute ចុចទាញរបស់វា ដែលជា draggable អោយស្មើនឹងតក្កអថេរ true ។

បន្ទាប់មកទៀត នៅពេលយើងចាប់ផ្តើមចុចទាញរូបខាងលើ ហេតុការណ៍ ondragstart នឹងកើតមានឡើង ដែលបណ្តាលអោយក្បួនឆ្លើយតបហេតុការណ៍ drag() ត្រូវយកមកប្រើ ហើយដំណឹងដែលជាហេតុការណ៍ event ត្រូវផ្តល់អោយក្បួននោះជាស្វ័យប្រវត្តិ។ ជាលទ្ធផល អត្តសញ្ញាណមានប្រភេទជាអត្ថបទរបស់រូបដែលត្រូវចុចទាញ ត្រូវបានកត់ត្រាទុក។

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

បន្ទាប់មកទៀត នៅពេលដែលយើងអូសរូបទៅលើធាតុដែលយើងចង់ទំលាក់រូបនៅក្នុងនោះ ហេតុការណ៍ ondragover នឹងកើតមានឡើង ដែលធ្វើអោយក្បួនឆ្លើយតបហេតុការណ៍ allowDrop() ត្រូវយកមកប្រើ ហើយលទ្ធភាពអាចទំលាក់រូបនៅក្នងនោះ ក៏ត្រូវបានផ្តល់អោយផងដែរ។

function allowDrop(ev) {
  ev.preventDefault();
}

ចុងក្រោយបំផុត នៅពេលដែលយើងទំលាក់រូបចូលទៅក្នុងធាតុដែលយើងចង់បាន ហេតុការណ៍ ondrop ត្រូវកើតមានឡើង ដែលធ្វើអោយក្បួនឆ្លើយតបហេតុការណ៍ drop() ត្រូវបានយកមកប្រើ ហើយរូបត្រូវបានបិទភ្ជាប់ទៅនឹងធាតុចុងក្រោយនោះ។

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}