新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JS實(shí)現(xiàn)圖片拖拽交換效果-創(chuàng)新互聯(lián)
JS實(shí)現(xiàn)圖片拖拽交換效果,供大家參考,具體內(nèi)容如下

聽 WEB前端javascript企業(yè)實(shí)戰(zhàn)班 公開課,用JS實(shí)現(xiàn)了圖片拖拽交換的目的;感謝老師的講解。
實(shí)現(xiàn)要點(diǎn)
- 鼠標(biāo)點(diǎn)擊onmousedown:獲取鼠標(biāo)在頁面上可視區(qū)域的位置(clientX, clientY)和元素外邊框距已定位父元素容器的位置(offsetLeft,offsetTop);
- 鼠標(biāo)移動(dòng)onmousemove: 獲取鼠標(biāo)在頁面上可視區(qū)域的位置(clientX, clientY),并實(shí)時(shí)改變目標(biāo)元素位置;進(jìn)行碰撞檢測(cè),同時(shí)計(jì)算被碰撞元素與目標(biāo)元素中心點(diǎn)距離,將距離最小的定位交換元素;
- 鼠標(biāo)釋放onmouseup: 進(jìn)行元素交換
注意點(diǎn)
- 排除沒有碰撞成功的情況,進(jìn)行特殊討論;
- 覆蓋html5原有的圖片拖拽功能,通過return false返回;
- 交換時(shí)同時(shí)勿忘記交換圖片的索引;
小技巧
- 進(jìn)行碰撞檢測(cè)時(shí),可以進(jìn)行逆向思維,檢測(cè)未碰撞的情況,即判斷目標(biāo)元素是否超過碰撞元素的邊界(如:目標(biāo)元素的右側(cè)是否超過被碰撞元素的左側(cè))
- 計(jì)算元素中心位置時(shí),可以改為計(jì)算元素左上角之間的距離,從而轉(zhuǎn)變?yōu)橛?jì)算(offsetLeft1,offsetTop1)(offsetLeft1,offsetTop1)與(offsetLefti(offsetLefti, offsetTopi)offsetTopi)的距離,以簡(jiǎn)化計(jì)算;
實(shí)現(xiàn)
HTML
本文標(biāo)題:JS實(shí)現(xiàn)圖片拖拽交換效果-創(chuàng)新互聯(lián)
當(dāng)前URL:http://www.dlmjj.cn/article/dieihi.html


咨詢
建站咨詢
