ondrag ఇవెంట్
నిర్వచనం మరియు ఉపయోగం
డ్రాగ్ ఇవెంట్ ఎలమెంట్ లేదా టెక్స్ట్ సెలెక్షన్ డ్రాగ్ చేయబడినప్పుడు జరుగుతుంది。
డ్రాగ్ అనే పదాన్ని ఉపయోగించడం అనగా మీరు ఒక వస్తువును పట్టి వివిధ స్థానాలకు లాగిపోని చేయడం అని అర్థం చేసుకోండి. మరింత తెలుసుకోవడానికి మా గురించి చదవండి HTML5 తీసుకురావడంహ్ట్మ్ల్ పాఠ్యక్రమం ఉపయోగించండి。
పరిశీలన:ఎలమెంట్ డ్రాగబడే చేయడానికి ప్రపంచవ్యాప్తంగా ఉపయోగించబడే HTML5 draggable అట్రిబ్యూట్。
సూచన:అప్రమేయంగా, లింకులు మరియు చిత్రాలు డ్రాగబడే అని పరిగణించబడతాయి మరియు draggable అట్రిబ్యూట్ వినియోగించకుండా ఉంటాయి。
డ్రాగ్ అనే ప్రక్రియలో వివిధ దశలలో అనేక ఇవెంట్లు ఉపయోగించబడతాయి మరియు జరుగుతాయి:
డ్రాగబడే లక్ష్యం (మూల ఎలమెంట్) పైన ప్రారంభం అవుతుంది:
- ondragstart - వినియోగదారుడు డ్రాగ్ చేయడం ప్రారంభించినప్పుడు జరుగుతుంది
- ondrag - ఎలమెంట్ డ్రాగ్ చేయబడినప్పుడు జరుగుతుంది
- ondragend - వినియోగదారుడు డ్రాగ్ చేసే ఎలమెంట్ పూర్తి చేసినప్పుడు జరుగుతుంది
స్థానాన్ని నిర్ధారించే ప్రతిస్పందనలు ప్రారంభం అవుతుంది:
- ondragenter - డ్రాగ్ చేసే ఎలమెంట్ స్థానానికి ప్రవేశించినప్పుడు జరుగుతుంది
- ondragover - డ్రాగ్ చేసే ఎలమెంట్ స్థానంపై ఉన్నప్పుడు జరుగుతుంది
- ondragleave - డ్రాగ్ చేసే ఎలమెంట్ స్థానాన్ని వదిలిపోయినప్పుడు జరుగుతుంది
- ondrop - డ్రాగ్ చేసే ఎలమెంట్ పెట్టబడిన స్థానంపై జరుగుతుంది
పరిశీలన:డ్రాగ్ చేసే ఎలమెంట్ పైన ప్రతి 350 మిల్లీసెకండ్లుగా ondrag ఇవెంట్ ప్రారంభం అవుతుంది。
ఉదాహరణ
డ్రాగ్ <p> ఎలమెంట్ ను డ్రాగ్ చేసినప్పుడు జావాస్క్రిప్ట్ అమలు చేయండి:
<p draggable="true" ondrag="myFunction(event)">నాకు లాగిపోని నేను!</p>
పేజీ కిందికి మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。
సంకేతం
హ్ట్మ్ల్ లో:
<element ondrag="myScript">
జావాస్క్రిప్ట్ లో:
object.ondrag = function(){myScript};
జావాస్క్రిప్ట్ లో ఉపయోగించడానికి addEventListener() మాధ్యమం:
object.addEventListener("drag", myScript);
పరిశీలన:ఇంటర్నెట్ ఎక్స్లోరర్ 8 లేదా అంతకు ముంది వర్షాలు మద్దతు ఇవ్వలేదు addEventListener() పద్ధతి。
సాంకేతిక వివరాలు
బాహ్యం విస్ఫోటం చేయగలిగేది: | మద్దతు |
---|---|
రద్దు చేయగలిగేది: | మద్దతు |
సంఘటన రకం: | DragEvent |
మద్దతు పొందే HTML టాగ్స్: | అన్ని HTML ఎలమెంట్స్ |
DOM వెర్షన్: | లెవల్ 3 సంఘటనలు |
బ్రౌజర్ మద్దతు
పట్టికలో చెప్పబడిన సంఘటనలను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్దేశిస్తుంది.
సంఘటనలు | చ్రోమ్ | ఐఇ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
---|---|---|---|---|---|
ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
మరిన్ని ఉదాహరణలు
ప్రతీ సాధ్యమైన డ్రాగ్ అండ్ డ్రాప్ సంఘటనల ప్రదర్శన:
<p draggable="true" id="dragtarget">డ్రాగ్ నాకు!</p> <div class="droptarget">ఇక్కడ డ్రాప్ చేయండి!</div> <script> /* ----------------- డ్రాగ్ లక్ష్యంపై తీసుకువచ్చిన సంఘటనలు ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() పద్ధతి డ్రాగ్ చేయబడిన డాటా రకాన్ని మరియు విలువను సెట్ చేస్తుంది event.dataTransfer.setData("Text", event.target.id); // డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభించినప్పుడు పదబంధాన్ని అవుట్పుట్ చేయండి document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభించబడింది."; // డ్రాగబలిగిన ఎలమెంట్ అప్రకారత్వాన్ని మార్చండి event.target.style.opacity = "0.4"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభించినప్పుడు అవుట్పుట్ పదబంధాన్ని రంగును మార్చండి document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయిన తర్వాత పదబంధాన్ని అవుట్పుట్ చేసి అప్రకారత్వాన్ని రీసెట్ చేయండి document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయినప్పుడు."; event.target.style.opacity = "1"; }); /* ----------------- డ్రాగ్ టార్గెట్ పైన జరుగుతున్న ఇవెంట్లు ----------------- */ // డ్రాగబల్ ప్రతిపాదన డ్రాగ్టింగ్ టార్గెట్ లోకి ప్రవేశించినప్పుడు డివ్ కాంటర్ స్టైల్స్ ను మార్చండి document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // డిఫాల్ట్ విధంగా, పెట్టిన డేటా/అంశాన్ని ఇతర అంశాలలో పెట్టలేదు. పెట్టిన అనుమతించడానికి, మాత్రమే అంశాల యొక్క డిఫాల్ట్ ప్రక్రియను నిరోధించాలి document.addEventListener("dragover", function(event) { event.preventDefault(); }); // డ్రాగబల్ ప్రతిపాదన డ్రాప్టింగ్ టార్గెట్ నుండి బయటకు వెళ్ళినప్పుడు డివ్ కాంటర్ స్టైల్స్ ను తిరిగి సెట్ చేయండి document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* డ్రాప్ ప్రక్రియలో - బ్రౌజర్ యొక్క డేటా యొక్క డిఫాల్ట్ ప్రక్రియను నిరోధించండి (డిఫాల్ట్ ప్లేస్ చేయడంలో లింక్లను తెరిచినాకా ఉంటుంది) అవుట్పుట్ టెక్స్ట్ రంగు మరియు DIV కాంటర్ రంగును తిరిగి సెట్ చేయండి dataTransfer.getData() పద్ధతిని ఉపయోగించి లంకెను కదల్చిన డేటాను పొందండి లంకెను కదల్చిన డేటా లంకెను కదల్చిన అంశం ఐడి ("drag1") లంకెను కదల్చిన కెలియదు అంశాన్ని పెట్టిన అంశంలో జతచేయండి */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script>