Definisi:
Seret dan lepas ialah ciri biasa di mana objek ditangkap dan kemudian diseret ke lokasi lain.
Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.
1. Bercakap tentang "acara seret dan lepas"
Acara seret dan lepas, iaitu meraih objek dan menyeret ia ke Kedudukan lain
Sesetengah peristiwa dicetuskan pada elemen yang diseret dan digugurkan, dan ada yang dicetuskan pada sasaran jatuh. Apabila elemen diseret, peristiwa seret mula, peristiwa seret dan peristiwa seret dicetuskan dalam urutan; apabila elemen diseret ke sasaran jatuh yang sah, peristiwa penyeret, peristiwa penyeretan, daun penyeretan atau jatuhkan dicetuskan mengikut urutan.
2. Proses pelaksanaan
Tetapkan elemen sebagai boleh diseret
<img draggable="true "> ;
Seret apa? Apabila elemen diseret, peristiwa berlaku (ondragstart dan setData())
atribut ondragstart memanggil fungsi, seret(event) menentukan untuk melihat data yang diseret, dataTransfer.setData() menetapkan seret dan lepas Data jenis dan nilai data.
function drag(ev){
ev.dataTransfer.setData("Teks",ev.target.id);
}
Di mana hendak meletakkannya? Peristiwa ondragover menentukan tempat untuk meletakkan data yang diseret
Secara lalai, data/elemen tidak boleh diletakkan ke dalam elemen lain. Jika anda ingin membenarkan peletakan, anda mesti menghalang pengendalian lalai elemen. Oleh itu, ondrop perlu diletakkan melalui kaedah event.preventDefault() dalam acara ondragover
event.preventDefault()
Panggilan pertama preventDefault() Untuk mengelakkan pemprosesan lalai pelayar, kemudian dapatkan data yang diseret melalui kaedah dataTransfer.getData("Text") Data yang diseret ialah id elemen yang diseret, akhirnya, elemen yang diseret itu.
fungsi drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Teks");
ev.target.appendChild(document.getElementById(data));
}
Anda baru sahaja melihat beberapa istilah atribut baharu, seperti ondragstart. Mungkin ia masih tidak biasa, dan saya tidak tahu mengapa Ia mungkin menjadi jelas kepada anda jika anda melihat jadual di bawah:
Seret kitaran hayat Atribut Keterangan
<. 🎜>Seret mula skrip ondragstart dalam Laksanakan skrip apabila operasi seret bermula (objek ialah elemen seret) Semasa proses seret skrip ondrag Skrip dibenarkan selagi skrip sedang diseret (objek ialah elemen yang diseret) Semasa proses menyeret skrip ondragenter Apabila elemen diseret ke sasaran peletakan yang sah, laksanakan skrip (objek ialah elemen sasaran) Semasa proses menyeret ondragover skrip Selagi elemen diseret pada sasaran peletakan undang-undang , laksanakan skrip (objek ialah elemen sasaran) Semasa proses menyeret skrip ondragleave Apabila elemen meninggalkan sasaran peletakan undang-undang (objeknya ialah elemen sasaran) Seret tamat skrip ondrop akan diseret Jalankan skrip apabila elemen seret diletakkan dalam elemen sasaran (objek ialah elemen sasaran) Seret tamat Skrip Ondragend Jalankan skrip apabila operasi seret tamat (objek ialah elemen seret)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event; /*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*获取目标元素*/
},
preventDefault:function(event){ /*取消事件的默认设置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>