您好,登錄后才能下訂單哦!
文件拖選v1.0
圖片不清楚時(shí)請右鍵點(diǎn)擊"在新鏈接中打開圖片"
實(shí)現(xiàn)效果
頁面布局
實(shí)現(xiàn)思路
拖選框
css樣式中設(shè)置拖選框樣式,注意設(shè)置position: absolute;漂浮狀態(tài).
監(jiān)聽p#container的鼠標(biāo)按下事件并獲取起始坐標(biāo),鼠標(biāo)按下時(shí)通過append()方法添加p#selectBox.
鼠標(biāo)按下事件后鼠標(biāo)移動(dòng)事件,比較鼠標(biāo)的當(dāng)前位置event.pageX,event.pageY來為p#selectBox添加坐標(biāo)top/left
和尺寸width/height.
鼠標(biāo)離開p#container或鼠標(biāo)松開事件后,remove()方法移除p#selectBox
單選
監(jiān)聽li點(diǎn)擊事件;
通過li>子元素.lebal>子元素指向lebal使用toggleClass()方法修改背景樣式(顯示/取消勾選);
通過this指向li元素本身使用toggleClass()方法修改背景顏色;
復(fù)選
監(jiān)聽鼠標(biāo)按下事件,按下時(shí)取消現(xiàn)有的lebal和li的勾選樣式;
監(jiān)聽li,當(dāng)鼠標(biāo)移動(dòng)到上面時(shí),添加樣式;
鼠標(biāo)松開時(shí)移除mouseover事件,使它不會(huì)繼續(xù)選中;
遺留問題
拖拽速度快時(shí)會(huì)有部分文件選不中,初步判斷是代碼執(zhí)行效率低的問題
以某個(gè)文件為起點(diǎn)選擇時(shí),有時(shí)無法選中該文件
如果在該文件上短暫停留后可以選中,初步判斷時(shí)代碼執(zhí)行效率低的問題
想要點(diǎn)擊復(fù)選按鈕時(shí)可以完成復(fù)選,但單選綁定的click事件與復(fù)選的mousedown事件沖突
點(diǎn)擊復(fù)選按鈕時(shí)會(huì)觸發(fā)復(fù)選的mousedown,移除選擇樣式,代碼邏輯問題
已解決 : 復(fù)選框的mousedown事件阻止冒泡 $(".lebal").bind('mousedown', function(event) {event.stopPropagation();})
360云盤復(fù)選框拖拽選中后再移開鼠標(biāo),則會(huì)取消判定該文件的選中,不清楚應(yīng)該往哪里加邏輯
源代碼
<<index.html>>
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" > </head> <body> <div id="container"> <ul> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> <li> <div class="lebal"><label></label></div> <div class="file_name"><p>文件列表</p></div> </li> </ul> </div> </body> </html>
<<style.css>>
* {margin: 0;padding: 0;} body {height: 700px;border: 1px black solid;} #selectBox {border: 1px solid #89d9ff;background-color: rgba(137, 217, 255, 0.5);position: absolute;display: block;} #container {margin-top: 100px;margin-left: 200px;width: 1200px;height: 600px;border: 1px red solid;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} ul {margin: 20px;} li {width: 100%;height: 40px;border-top: 1px #ddd solid;list-style: none;} label {background: url('../images/lebal.png')no-repeat;background-position: 0 0;width: 15px;height: 15px;margin: 12.5px auto;display: block;} .toggleLebalClass {background-position: 0 -52px;} .toggleLiClass {background: #eeefff;} .lebal {width: 40px;height: 40px;float: left;} .file_name {width: 80%;height: 40px;float: left;} p {line-height: 40px;}
<<script.js>>
"use strict"; var x, y; $(function() { // 點(diǎn)選 $("li").bind('click', function(event) { $(this).children(".lebal").children().toggleClass("toggleLebalClass"); $(this).toggleClass("toggleLiClass"); }); // 復(fù)選 $(".lebal").bind('mousedown', function(event) { event.stopPropagation(); }) // 拖選 $("#container").mousedown(function(event) { x = event.pageX; y = event.pageY; $("#container").append("<div id='selectBox'></div>"); $("li").children(".lebal").children().removeClass("toggleLebalClass"); $("li").removeClass("toggleLiClass"); $("li").bind("mouseover", function() { $(this).children(".lebal").children().addClass("toggleLebalClass"); $(this).addClass("toggleLiClass"); }); }).mousemove(function(event) { $("#selectBox").css({ left: event.pageX > x ? x : event.pageX, top: event.pageY > y ? y : event.pageY, width: Math.abs(event.pageX - x), height: Math.abs(event.pageY - y) }); }).mouseup(function(event) { $("#selectBox").remove(); $("li").unbind("mouseover"); }) $("#container").mouseleave(function() { $("#selectBox").remove(); }) });
以上這篇JavaScript模擬文件拖選框樣式v1.0的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。