中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

學習html5拖動drag

發布時間:2020-07-18 20:20:45 來源:網絡 閱讀:258 作者:haotianaoxiang 欄目:移動開發
 主要就是幾個事件函數及屬性
被拖動元素:draggable 屬性設置為true
           ondragstart(event)當元素被拖動時發生什么事
例如可以把被拖動元素的id存儲事件中 ev.dataTransfer.setData("name","value");value--ev.target.id
 
元素被放置
ondragover(ev) function 這個函數用來阻止瀏覽器的默認行為ev.preventDefault()
ondrop()元素被放置var id = ev.dataTransfer.getData("name");
ev.target.appendChild(document.getElementById(id))  ev.target是目標事件對象
要是去實現來回的拖動只要在目標對象上都加入ondragover ondrop 句柄就好了

 

<!DOCTYPE HTML>

<html>

<head>

<title></title>

<meta charset="utf-8"/>

<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 id="div1" ondragover="allowDrag(event)" ondrop="dropImg(event)"></div>

<div id="div2" ondragover="allowDrag(event)" ondrop="dropImg(event)">

<img id="img1" src="22.gif" draggable="true" ondragstart="dragImg(event)"/>

</div>

<script>

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問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

桓台县| 仁怀市| 正宁县| 惠来县| 类乌齐县| 巨野县| 平远县| 海阳市| 军事| 南溪县| 滨海县| 安西县| 团风县| 玉树县| 五原县| 博罗县| 神木县| 沽源县| 乌海市| 天长市| 卫辉市| 吉木萨尔县| 家居| 长治县| 新余市| 伊川县| 铜鼓县| 东山县| 乾安县| 喀喇沁旗| 黔南| 衡东县| 化德县| 镇巴县| 沅陵县| 新沂市| 哈密市| 聊城市| 伊金霍洛旗| 南郑县| 满洲里市|