學(xué)習(xí)html5拖動(dòng)drag

發(fā)布時(shí)間：2020-07-18 20:20:45 來源：網(wǎng)絡(luò) 閱讀：257 作者：haotianaoxiang 欄目：移動(dòng)開發(fā)

主要就是幾個(gè)事件函數(shù)及屬性

被拖動(dòng)元素:draggable 屬性設(shè)置為true

ondragstart(event)當(dāng)元素被拖動(dòng)時(shí)發(fā)生什么事

例如可以把被拖動(dòng)元素的id存儲(chǔ)事件中 ev.dataTransfer.setData("name","value");value--ev.target.id

元素被放置

ondragover(ev) function 這個(gè)函數(shù)用來阻止瀏覽器的默認(rèn)行為ev.preventDefault()

ondrop()元素被放置var id = ev.dataTransfer.getData("name");

ev.target.appendChild(document.getElementById(id)) ev.target是目標(biāo)事件對(duì)象

要是去實(shí)現(xiàn)來回的拖動(dòng)只要在目標(biāo)對(duì)象上都加入ondragover ondrop 句柄就好了

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1{width:200px; height:200px;border:solid 1px gray;}

#div2{width:200px; height:200px;border:solid 1px gray;}

img{border:solid 1px red;}

</style>

</head>

</div>

function dragImg(ev){

ev.dataTransfer.setData("heh",ev.target.id);

}

function allowDrag(ev){

ev.preventDefault();

}

function dropImg(ev){

ev.preventDefault();

var data = ev.dataTransfer.getData("heh");

//console.log(document.getElementById(data));

ev.target.appendChild(document.getElementById(data));

}

</script>

<body>

</body>

向AI問一下細(xì)節(jié)