欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

文件拖選v1.0

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站制作與策劃設(shè)計,會澤網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:會澤等地區(qū)。會澤做網(wǎng)站價格咨詢:18982081108

圖片不清楚時請右鍵點擊"在新鏈接中打開圖片"

實現(xiàn)效果

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

頁面布局

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

實現(xiàn)思路

拖選框

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

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

鼠標(biāo)按下事件后鼠標(biāo)移動事件,比較鼠標(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點擊事件;

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

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

復(fù)選

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

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

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

遺留問題

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

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

以某個文件為起點選擇時,有時無法選中該文件

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

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

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

點擊復(fù)選按鈕時會觸發(fā)復(fù)選的mousedown,移除選擇樣式,代碼邏輯問題

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

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

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

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

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

源代碼

<<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() {
  // 點選
  $("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的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：JavaScript模擬文件拖選框樣式v1.0的實例
分享地址：http://chinadenli.net/article22/gohojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、微信小程序、網(wǎng)站營銷、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司