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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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/12/05 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python多线程用法实例详解
2015/01/15 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python引用计数操作示例
2018/08/23 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python3.7调试的实例方法
2020/07/21 Python
如何用Python 加密文件
2020/09/10 Python
建筑结构施工专业推荐信
2014/02/21 职场文书
平面设计求职信
2014/03/10 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
财务部岗位职责范本
2015/04/14 职场文书
农村党员干部承诺书
2015/05/04 职场文书
企业党建工作总结2015
2015/05/26 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js