JavaScript模拟文件拖选框样式v1.0的实例


Posted in Javascript onAugust 04, 2017

文件拖选v1.0

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

实现效果

JavaScript模拟文件拖选框样式v1.0的实例

页面布局

JavaScript模拟文件拖选框样式v1.0的实例

实现思路

拖选框

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

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

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

和尺寸width/height.

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

单选

监听li点击事件;

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

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

复选

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

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

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

遗留问题

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

JavaScript模拟文件拖选框样式v1.0的实例

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

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

JavaScript模拟文件拖选框样式v1.0的实例

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

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

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

JavaScript模拟文件拖选框样式v1.0的实例

JavaScript模拟文件拖选框样式v1.0的实例

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

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");
  });
  // 复选
  $(".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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
datagrid框架的删除添加与修改
Apr 08 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
js获取form的方法
May 06 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
Vue制作Todo List网页
Apr 26 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 #Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
Angular2环境搭建具体操作步骤(推荐)
Aug 04 #Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 #Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 #Javascript
vue 2.0封装model组件的方法
Aug 03 #Javascript
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
You might like
php上传、管理照片示例
2006/10/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
详解django.contirb.auth-认证
2018/07/16 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python eventlet绿化和patch原理
2020/11/21 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
施工人员岗位职责
2013/12/12 职场文书
运动会广播稿300字
2014/01/10 职场文书
中队活动总结
2014/08/27 职场文书
自我推荐信格式模板
2015/03/24 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Python实现文字pdf转换图片pdf效果
2022/04/03 Python