盗墓笔记全集,yy玄幻小说排行榜完本,将夜猫腻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JavaScript模擬文件拖選框樣式v1.0的實(shí)例-創(chuàng)新互聯(lián)

文件拖選v1.0

創(chuàng)新互聯(lián)公司專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、黑山網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為黑山等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

圖片不清楚時(shí)請(qǐng)右鍵點(diǎn)擊"在新鏈接中打開(kāi)圖片"

實(shí)現(xiàn)效果

頁(yè)面布局

實(shí)現(xiàn)思路

拖選框

css樣式中設(shè)置拖選框樣式,注意設(shè)置position: absolute;漂浮狀態(tài).

監(jiān)聽(tīng)p#container的鼠標(biāo)按下事件并獲取起始坐標(biāo),鼠標(biāo)按下時(shí)通過(guò)append()方法添加p#selectBox.

鼠標(biāo)按下事件后鼠標(biāo)移動(dòng)事件,比較鼠標(biāo)的當(dāng)前位置event.pageX,event.pageY來(lái)為p#selectBox添加坐標(biāo)top/left

和尺寸width/height.

鼠標(biāo)離開(kāi)p#container或鼠標(biāo)松開(kāi)事件后,remove()方法移除p#selectBox

單選

監(jiān)聽(tīng)li點(diǎn)擊事件;

通過(guò)li>子元素.lebal>子元素指向lebal使用toggleClass()方法修改背景樣式(顯示/取消勾選);

通過(guò)this指向li元素本身使用toggleClass()方法修改背景顏色;

復(fù)選

監(jiān)聽(tīng)鼠標(biāo)按下事件,按下時(shí)取消現(xiàn)有的lebal和li的勾選樣式;

監(jiān)聽(tīng)li,當(dāng)鼠標(biāo)移動(dòng)到上面時(shí),添加樣式;

鼠標(biāo)松開(kāi)時(shí)移除mouseover事件,使它不會(huì)繼續(xù)選中;

遺留問(wèn)題

拖拽速度快時(shí)會(huì)有部分文件選不中,初步判斷是代碼執(zhí)行效率低的問(wèn)題

JavaScript模擬文件拖選框樣式v1.0的實(shí)例

以某個(gè)文件為起點(diǎn)選擇時(shí),有時(shí)無(wú)法選中該文件

如果在該文件上短暫停留后可以選中,初步判斷時(shí)代碼執(zhí)行效率低的問(wèn)題

JavaScript模擬文件拖選框樣式v1.0的實(shí)例

想要點(diǎn)擊復(fù)選按鈕時(shí)可以完成復(fù)選,但單選綁定的click事件與復(fù)選的mousedown事件沖突

點(diǎn)擊復(fù)選按鈕時(shí)會(huì)觸發(fā)復(fù)選的mousedown,移除選擇樣式,代碼邏輯問(wèn)題

已解決 : 復(fù)選框的mousedown事件阻止冒泡 $(".lebal").bind('mousedown', function(event) {event.stopPropagation();})

JavaScript模擬文件拖選框樣式v1.0的實(shí)例

360云盤復(fù)選框拖拽選中后再移開(kāi)鼠標(biāo),則會(huì)取消判定該文件的選中,不清楚應(yīng)該往哪里加邏輯

JavaScript模擬文件拖選框樣式v1.0的實(shí)例

源代碼

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：JavaScript模擬文件拖選框樣式v1.0的實(shí)例-創(chuàng)新互聯(lián)
瀏覽路徑：http://fisionsoft.com.cn/article/dossch.html

新聞中心

其他資訊