Drag and Drop என்பது நமது வலைத்தளத்தில் உள்ளவற்றை (படங்களையோ அல்லது கோப்புகளையோ) இடம் நகர்த்தி வைப்பதற்கு உதவும் ஒரு் பயன்பாடு ஆகும். எந்த ஒரு Object-ஐ நாம் இடம் நகர்த்த விரும்புகிறோமோ அந்த object-ன் மீது சொடுக்கி, பின்னர் சொடுக்கிய நிலையிலேயே அத்தனை நகர்த்தி வேறொரு இடத்தில் வைத்துவிட்டு mouse பட்டனில் இருந்து விரலை நீக்கினால் அந்த object இடம்பெயர்ந்து விடும்.
உதாரணத்துக்கு நமது வலைத்தளத்தைப் பயன்படுத்தப் போகும் பயனர்கள் அங்கு உள்ள ஒரு் படத்தை இடம்நகர்த்தி அங்கு காணப்படும் ஒரு் சிறிய பெட்டிக்குள் வைக்குமாறு அமைப்பதற்கான code பின்வருமாறு அமையும்.
File: drag and frop.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
</head>
<body>
<p>Drag the Dog image into the rectangle</p>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”drag1″ src=”/home/nithya/Pictures/nithya-5th-month/DSC_0171.jpg” draggable=”true” ondragstart=”drag(event)” width=”300″ height=”200″>
</body>
</html>
இதற்கான code பார்ப்பதற்கு சற்று கடினமாக இருந்தாலும் கொஞ்சம் கொஞ்சமாக படித்துப் பார்த்தால் சுலபமாகப் புரிந்து விடும்.
முதலில் body tag-க்குள் உள்ள <div> tag செவ்வக வடிவில் ஒரு் divition-ஐ உருவாக்குவதற்கும், <img> tag ஒரு் படத்தை வெளிப்படுத்துவதற்கும் பயன்படுகிறது. இந்தப் படத்தைத் தான் <div> tag-ஆல் உருவாக்கப்பட்ட செவ்வக வடிவ பெட்டிக்குள் நாம் நகர்த்தப் போகிறோம்.
<img> tag-க்குள் உள்ள attributes-ன் விளக்கத்தைப் பின்வருமாறு காணலாம்.
id = இதன் மூலம் இந்தப் படத்திற்கு ‘COW’ எனப் பெயரிட்டுள்ளோம்.
src = இந்தப் படத்திற்கான முழு முகவரி இங்கு அளிக்கப்பட்டுள்ளது.
draggable = இதற்கு ‘true’ என மதிப்பினை அமைப்பதன் மூலம், இந்தப் படத்தை நகருமாறு மாற்றி அமைக்க முடியும்.
ondragstart = இந்தப் படத்தை நகர்த்தும் போது என்ன நிகழ வேண்டும் எனும் மதிப்பு drag(event) எனும் function-ஆக இங்கு கொடுக்கப்பட்டுள்ளது. எனவே இந்தப் படத்தை நகர்த்தும் போது, இந்த function-க்குள் வரையறுக்கப்பட்டுள்ள விஷயங்களே நிகழ்த்தப்படும்.
<div> tag-க்குள் உள்ள attributes-ன் விளக்கத்தைப் பின்வருமாறு காணலாம்.
id = இதன் மூலம் இந்த divition-க்கு ‘rect’ எனப் பெயரிட்டுள்ளோம்.
ondrop = இந்த divition-க்குள் ஏதேனும் ஒரு் object-ஐ கொண்டு வந்து விடும்போது என்ன நிகழ வேண்டும் எனும் மதிப்பு drop(event) எனும் function-ஆக கொடுக்கப்பட்டுள்ளது.
ondragover = cursor- ஆல் ஏதேனும் ஒரு் object நகர்த்தப் பட்டுக்கொண்டிருக்கும் போது என்ன நிகழ வேண்டும் என்பது allowDrop(event) எனும் function-ஆக இங்கு கொடுக்கப் பட்டுள்ளது.
மேற்கூறிய <img> மற்றும் <div> tags- ன் attributes-ல் கொடுக்கப்பட்டுள்ள functions அனைத்தும் <head>-க்குள் வரையறுக்கப்படும். இத்தகைய functions-ன் தொடக்கத்திலும் முடிவிலும் <script> எனும் இணை tags காணப்படும்.
இப்போது ஒவ்வொரு function-க்குள்ளும் கொடுக்கப்பட்டுள்ள மதிப்பின் அர்தத்தைப் புரிந்து கொள்வோம்.
Drag function: இதற்குள் image-ன் id மற்றும் அதன் datatype வரையறுக்கப்பட்டுள்ளது. இதற்கு datatransfer.setdata எனும் function பயன்பட்டுள்ளது. ev.target.id என்பது <img>-க்குள் நாம் கொடுத்துள்ள ‘COW’ எனும் மதிப்பினையும், “text” என்பது அதன் datatype- ஐயும் குறிக்கிறது.
Allowdrop function: பொதுவாக வலைத்தளத்தில் ஒரு் object-ஐ நகர்த்த முடியாது. இதற்குள் பயன்படுத்தப்பட்டுள்ள preventDefault எனும் function இதுபோன்ற அடிப்படையான இயல்பினை மாற்றி அமைத்து, ஒரு் object-ஐ நகருமாறு செய்யும்.
Drop function: இதில் பயன்படுத்தப்பட்டுள்ள datatransfer.getdata என்பது drag function-ல் datatransfer.setdata-ஆல் வரையறுக்கப்பட்ட மதிப்பினை பெற்றுக்கொள்ளும். பின்னர் அந்த மதிப்பினை target.appendChild எனும் function மூலமாக, நாம் உருவாக்கிய divition-க்குள் பொருத்திவிடும்.
