HTML5 拖放

దయచేసి CodeW3C.com చిత్రాన్ని ఆయతపై కొనసాగించండి.

డ్రాగ్ అండ్ డ్రాప్

డ్రాగ్ అండ్ డ్రాగ్ (డ్రాగ్ మరియు డ్రాప్) చాలా సాధారణ లక్షణం. ఇది మీరు ఏదో అనుకున్న ప్రదేశానికి కొన్ని విషయాలను కదిల్చి డ్రాగ్ చేయడానికి సూచిస్తుంది.

డ్రాగ్ అండ్ డ్రాగ్ హెచ్టిఎంఎల్5 పేరిట భాగం కాగలదు: ఏ ఎలమెంట్ కూడా డ్రాగబుల్ చేయబడవచ్చు.

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు డ్రాగ్ అండ్ డ్రాప్ పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్లను సూచిస్తాయి.

API
డ్రాగ్ అండ్ డ్రాప్ 4.0 9.0 3.5 6.0 12.0

HTML డ్రాగ్ అండ్ డ్రాప్ ఉదాహరణ

డ్రాగ్ అండ్ డ్రాప్ గురించి ఈ సరళ ఉదాహరణ ఉంది:

ఉదాహరణ

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

స్వయంగా ప్రయత్నించండి

ఇది కాక్షా కష్టంగా కనిపించవచ్చు, కానీ డ్రాగ్ అండ్ డ్రాప్ ఇవెంట్స్ యొక్క అన్ని విభిన్న భాగాలను అన్వేషించండి.

ఎలమెంట్ ను డ్రాగబుల్ చేయండి

మొదటిది: ఒక ఎలమెంట్ ను డ్రాగబుల్ చేయడానికి, draggable అట్రిబ్యూట్ ను true చేయండి:

<img draggable="true">

డ్రాగ్ అండ్ డ్రాప్ కంటెంట్ - ondragstart మరియు setData()

అప్పుడు, ఎలమెంట్ డ్రాగ్ అయినప్పుడు జరిగే పనులను నిర్ణయించండి.

పైని ఉదాహరణలో, ondragstart అట్రిబ్యూట్ డ్రాగ్(event) ఫంక్షన్ కాల్ చేసింది, డ్రాగ్ చేయవలసిన డేటా నిర్ణయించింది.

dataTransfer.setData() మెథడ్ డ్రాగబుల్ డేటా టైప్ మరియు విలువను సెట్ చేస్తుంది:

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

ఈ ఉదాహరణలో, డేటా టైప్ "text" ఉంది, మరియు విలువ ఈ డ్రాగబుల్ ఎలమెంట్ ఐడి ("drag1") ఉంది。

拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

event.preventDefault()

చేయడం - ondrop

ఎగుమతి చేసిన డేటాను వదిలించినప్పుడు, drop ఇంజెక్షన్ జరుగుతుంది.

పైని ఉదాహరణలో, ondrop అంశం ఒక ఫంక్షన్ ని కాల్ చేస్తుంది, drop(event):

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

కోడ్ వివరణ:

  • preventDefault() కాల్ ద్వారా డేటాను బ్రౌజర్ యొక్క ప్రమాణబద్ధ ప్రాసెసింగ్ నిరోధించండి (డ్రాప్ ఇంజెక్షన్ యొక్క ప్రమాణబద్ధ ప్రాసెసింగ్ లింకులు తెరవడం ఉంటుంది)
  • dataTransfer.getData() పద్ధతి ద్వారా ఎగుమతి చేసిన డేటా పొందండి. ఈ పద్ధతి సెట్Data() పద్ధతిలో అదే రకం డేటాను సెట్ చేసిన కొన్ని డేటాను తిరిగి ఇచ్చింది ఉంటుంది
  • ఎగుమతి చేసిన డేటా ఎగుమతి చేసిన పరికరం యొక్క id ("drag1") ఉంటుంది
  • ఎగుమతి చేసిన పరికరాన్ని ప్రస్తుత పరికరంలో జోడించండి

మరిన్ని ఉదాహరణలు

చిత్రాన్ని ఎగుమతి చేయండి

రెండు <div> పరికరాల మధ్యన చిత్రాన్ని ఎగుమతి చేయడానికి ఎలా చేయాలి:

దయచేసి CodeW3C.com చిత్రాన్ని ఆయతపై కొనసాగించండి.

స్వయంగా ప్రయత్నించండి