Seret dan Lepaskan
Seret dan lepas ialah ciri biasa di mana anda mengambil objek dan menyeretnya ke lokasi lain kemudian.
Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.
1. Seret dan lepas HTML5
Seret dan lepas (Seret dan lepas) adalah sebahagian daripada standard HTML5.
2. Seret mula
ondragstart: Fungsi dipanggil, seret (peristiwa), yang menentukan data yang diseret
3. Tetapkan data seret
setData(): Tetapkan jenis data dan nilai data yang diseret.
4. Peletakan
ondragover: Acara menentukan tempat untuk meletakkan data yang diseret.
5 Peletakan
ondrop: Apabila meletakkan data yang diseret dan digugurkan, peristiwa jatuh akan berlaku
Ringkasan:
ondrop Peristiwa yang dicetuskan pada sasaran seret (elemen sumber):
ondragstart: Dicetuskan apabila pengguna mula menyeret elemen
ondrag: Dicetuskan apabila elemen sedang diseret
ondragend: Dicetuskan selepas pengguna selesai menyeret elemen
Peristiwa dicetuskan apabila sasaran dilepaskan
ondragenter: Acara ini dicetuskan apabila objek yang diseret oleh tetikus memasuki skop bekasnya
ondragover: Apabila objek yang diseret berada dalam bekas objek lain Ini peristiwa dicetuskan apabila menyeret dalam julat
ondragleave: Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus meninggalkan skop bekasnya
ondrop: Peristiwa ini dicetuskan apabila butang tetikus dilepaskan semasa proses menyeret
Seret dan lepas contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
float: left;
background-color: #CCCCCC;
}
#box2{
float: left;
background-color: aqua;
}
</style>
<script> var box1Div, msgDiv, img1, box2Dib;
window.onload = function () {
box1Div = document.getElementById("box1");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
box2Div = document.getElementById("box2");
box1Div.ondragover = function (e) {
e.preventDefault();
}
box2Div.ondragover = function (e) {
e.preventDefault();
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
function dropImghandler(e) {
//创建节点
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>
bahagian seterusnya