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() కాల్ చేయడం ద్వారా డేటా బ్రౌజర్ మాదిరిగా నిరోధించండి (drop ఇవెంట్ మాదిరిగా లింక్ గా ప్రారంభించడం బ్రౌజర్ యొక్క డిఫాల్ట్ ప్రక్రియ ఉంది)
  • dataTransfer.getData() మాదిరిగా డ్రాగ్ చేసిన డేటా పొందండి. ఈ మాదిరిగా setData() మాదిరిగా సెట్ చేయబడిన ఏ డేటా రకాన్ని ఈ మాదిరిగా తిరిగి ఇవ్వబడుతుంది
  • డ్రాగ్ చేసిన డేటా డ్రాగ్ చేసిన ఎలిమెంట్ యొక్క id ("drag1") ఉంటుంది
  • డ్రాగ్ చేసిన ఎలిమెంట్ని ప్లేస్ ఎలిమెంట్లో జోడించండి

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

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

రెండు <div> ఎలిమెంట్స్ మధ్య చిత్రాన్ని డ్రాగ్ చేయడం ఎలా ఉంటుంది:

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

మీరే ప్రయత్నించండి