H5的拖拽事件

H5的拖拽事件

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border: 2px solid gray;
display: inline-block;
}
.box img{
width: 100%;
height: 100%;
}
.userPic{
width: 200px;
height: 200px;
border: 2px solid gray;
}
.userPic img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class = "box"></div>

<img src="https://www.baidu.com/img/bd_logo1.png" draggable="true" id="dragObj">
<div class="userPic">上傳頭像</div>
</body>
<script type="text/javascript">
//h5新增了drag相關(guān)事件
//拖拽頁(yè)面上的圖片
var img = document.getElementsByTagName("img")[0],
box = document.getElementsByClassName("box")[0];
//被拖拽元素上綁定dragstart事件
img.ondragstart = function(e){
//獲取元素標(biāo)識(shí)并放入事件對(duì)象
e.dataTransfer.setData("id", "dragObj");
};
//為容器對(duì)象綁定dragover和drop事件
box.ondragover = function(e){
//阻止默認(rèn)事件
e.preventDefault();
}
box.ondrop = function(e){
//從事事件對(duì)象中獲取元素標(biāo)識(shí)id
var objId = e.dataTransfer.getData("id");
//將被拖拽元素移動(dòng)到容器內(nèi)部。
this.appendChild(document.getElementById(objId));
}
//拖拽打開外部文件
//接收容器
var userPic = document.getElementsByClassName("userPic")[0];
//給接收容器加dragover和drop事件
userPic.ondragover = function(e){
e.preventDefault();
};
userPic.ondrop = function(e){
e.preventDefault();
//獲取被拖拽的文件
var file = e.dataTransfer.files[0];
//用FileReader實(shí)例來讀取文件
var reader = new FileReader();
reader.readAsDataURL(file);
//讀取成功吃觸發(fā)reader 的load事件
reader.onload = function(){
//創(chuàng)建圖片標(biāo)簽
var img = document.createElement("img");
//result屬性值為接收結(jié)果
img.src = reader.result;
//取消容器中上傳頭像的文字
userPic.innerHTML = "";
//把img添加到userPic容器中
userPic.appendChild(img);
};
//還原border
this.style.border = "2px solid gray";
};
//當(dāng)被拖拽文件進(jìn)去容器中觸發(fā)dragenter事件
userPic.ondragenter = function(e){
e.preventDefault();
this.style.border = "5px red dotted";
};
//當(dāng)被拖拽文件離開容器中觸發(fā)dragleave事件
userPic.ondragleave = function(e){
e.preventDefault();
this.style.border = "2px solid gray";
};
</script>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末贯城,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子踩晶,更是在濱河造成了極大的恐慌,老刑警劉巖排苍,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件则果,死亡現(xiàn)場(chǎng)離奇詭異遗增,居然都是意外死亡饰及,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門橘忱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人秉继,你說我怎么就攤上這事盔腔。” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵佛猛,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么究飞? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任半哟,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己拆挥,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布呻待。 她就那樣靜靜地躺著迫淹,像睡著了一般应民。 火紅的嫁衣襯著肌膚如雪黄虱。 梳的紋絲不亂的頭發(fā)上碉渡,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音朵耕,去河邊找鬼处嫌。 笑死斟湃,一個(gè)胖子當(dāng)著我的面吹牛凝赛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起备闲,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤狱掂,失蹤者是張志新(化名)和其女友劉穎钧椰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體符欠,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嫡霞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了希柿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诊沪。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖曾撤,靈堂內(nèi)的尸體忽然破棺而出端姚,到底是詐尸還是另有隱情,我是刑警寧澤挤悉,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布渐裸,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏昏鹃。R本人自食惡果不足惜尚氛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望洞渤。 院中可真熱鬧阅嘶,春花似錦、人聲如沸载迄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽护昧。三九已至魂迄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惋耙,已是汗流浹背捣炬。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留怠晴,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓浴捆,卻偏偏與公主長(zhǎng)得像蒜田,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子选泻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 王家有一子冲粤,名曰狗蛋。雖年僅二五页眯,其顏近乎妖也梯捕,性近乎桀也。眾懼之窝撵,加以王甚寵之傀顾,日益驕縱,不知王法也碌奉。日久短曾,王之...
    捕捉到一只林祁閱讀 713評(píng)論 0 0
  • 在我上幼兒園中班的時(shí)候,我家有一件大事發(fā)生了:老媽懷孕了赐劣!這意味著我要做哥哥了嫉拐。 我清楚地記得,媽媽告訴我這個(gè)...
    小壞蛋格瑞特閱讀 1,369評(píng)論 0 1
  • 有一個(gè)相親節(jié)目魁兼,叫“非誠(chéng)勿擾”婉徘。因?yàn)楸緯r(shí)比較忙,所以斷斷續(xù)續(xù)看了幾期,比較有感觸的是一位女嘉賓盖呼,有點(diǎn)胖儒鹿,也不是很美...
    夏言baby閱讀 774評(píng)論 0 1