—————————————————————————————————————————————————————————

文件拖选v1.0

图片不清楚时请右键点击"在新链接中打开图片"

实现效果

页面布局

实现思路

  • 拖选框

    css样式中设置拖选框样式,注意设置position: absolute;漂浮状态.

    监听div#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加div#selectBox.

    鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为div#selectBox添加坐标top/left

    和尺寸width/height.

    鼠标离开div#container或鼠标松开事件后,remove()方法移除div#selectBox

  • 单选

    监听li点击事件;

    通过li>子元素.lebal>子元素指向lebal使用toggleClass()方法修改背景样式(显示/取消勾选);

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

  • 复选

    监听鼠标按下事件,按下时取消现有的lebal和li的勾选样式;

    监听li,当鼠标移动到上面时,添加样式;

    鼠标松开时移除mouseover事件,使它不会继续选中;

遗留问题

  • 拖拽速度快时会有部分文件选不中,初步判断是代码执行效率低的问题

  • 以某个文件为起点选择时,有时无法选中该文件

    如果在该文件上短暂停留后可以选中,初步判断时代码执行效率低的问题

  • 想要点击复选按钮时可以完成复选,但单选绑定的click事件与复选的mousedown事件冲突

    点击复选按钮时会触发复选的mousedown,移除选择样式,代码逻辑问题

  • 已解决 : 复选框的mousedown事件阻止冒泡 $(".lebal").bind('mousedown', function(event) {event.stopPropagation();})

  • 360云盘复选框拖拽选中后再移开鼠标,则会取消判定该文件的选中,不清楚应该往哪里加逻辑

源代码

<<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">

</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:;padding:;}

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");

    });

    // 复选

    $(".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的更多相关文章

  1. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  2. ZH奶酪：纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  3. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  4. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  5. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  6. 点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  7. 模拟多级复选框效果的jquery代码

    jquery做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现 ...

  8. 模拟多级复选框效果--jquery

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...

  9. 超级简单的利用javascript实现文件拖拽事件

    1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...

随机推荐

  1. 【数据结构】 最小生成树（三）——prim算法

    上一期介绍到了kruskal算法,这个算法诞生于1956年,重难点就是如何判断是否形成回路,此处要用到并查集,不会用当然会觉得难,今天介绍的prim算法在kruskal算法之后一年(即1957年)诞生 ...

  2. Java-并发入门

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ Java中实现多线程的方法 实现Runnable接口 实现Runnable接口里的run()方法 ...

  3. ubuntu问题集锦

    我使用的是ubuntu 14.04 用UltraIOS 制作镜像安装的  ubuntu 问题1:闪屏问题以及文字显示不全 解决方案:重装显卡驱动 解决过程:http://my.oschina.net/ ...

  4. Ubuntu 16.04LTS 常用软件安装

    一.遇到的问题 1.su认证失败 sudo passwd //输入命令,然后修改密码即可 2.移动启动器 gsettings set com.canonical.Unity.Launcher laun ...

  5. [P4063][JXOI2017]数列(DP)

    题目描述 九条可怜手上有一个长度为 n 的整数数列 ri,她现在想要构造一个长度为 n 的,满足如下条件的整数数列 A: • 1 ≤ Ai ≤ ri. • 对于任意 3 ≤ i ≤ n,令 R 为 A ...

  6. 【DFS】【DP】岳麓山上打水

    [vijos1159]岳麓山上打水 描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信 ...

  7. Problem D: 调用自定义函数search(int list[], int n),在数组中查找某个数

    AC代码#include <stdio.h> int find(int *a, int l, int x) { ; int i; ; i < l; i ++) if(a[i] == ...

  8. Java后台JSON数据的使用

    1. List集合转换成json代码 List list = new ArrayList(); list.add( "first" ); list.add( "secon ...

  9. iOS10 App跳转到系统设置

     实现类似万能钥匙中点击一个Wi-Fi跳转到系统Wi-Fi设置界面的功能. NSString * urlString = @"App-Prefs:root=WIFI"; if ([ ...

  10. How do I find what queries were executing in a SQL memory dump?-----stack

     https://blogs.msdn.microsoft.com/askjay/2010/10/03/how-do-i-find-what-queries-were-executing-in-a-s ...