Die spezifische Methode lautet wie folgt:
1. Setzen Sie das ziehbare Attribut des Objektelements auf true (draggable="true"). Es ist außerdem zu beachten, dass das a-Element und das img-Element href angeben müssen 3. Fallimplementierungscode:
(1) HTML-Codesegment:
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br /> <img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/ alt="Verwenden Sie HTML5, um eine einfache Drag-Funktion zu implementieren" >
(2) CSS-Codesegment: #tuo{
width: 540px;
height: 320px;
background: #e54d26;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #d2d2d2;
box-shadow: 1px 4px 8px #646464;
}
img{
width: 500px;
height: 280px;
}
function allowDrop(ev){ //不执行默认处理(拒绝被拖放) ev.preventDefault(); }; function drag(ev){ //使用setData(数据类型,携带的数据) //方法将要拖放的数据存入dataTransfer对象 ev.dataTransfer.setData("Text",ev.target.id); }; function drop(ev){ //不执行默认处理(拒绝被拖放) ev.preventDefault(); //使用getData()获取到数据,然后赋值给data var data = ev.dataTransfer.getData("Text"); //使用appendChild方法把拖动的节点放到元素节点中成为其子节点 ev.target.appendChild(document.getElementById(data)); };
4. Der erzielte Effekt ist wie folgt:
( 1) Vor dem Ziehen und Ablegen: (2) Nach dem Ziehen und AblegenVerwandte Empfehlungen:
HTML5-Tutorial
Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML5, um eine einfache Drag-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!