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

网络编程 2024/9/24 佚名

3 1 2

文件拖选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()方法修改背景颜色;

复选

监听鼠标按下事件,按下时取消现有的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="/UploadFiles/2021-04-02/jquery-3.2.1.js">

<<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 "#selectBox").remove();
    $("li").unbind("mouseover");
  })
  $("#container").mouseleave(function() {
    $("#selectBox").remove();
  })
});


以上这篇JavaScript模拟文件拖选框样式v1.0的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

js模拟文件拖选框样式

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

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

js模拟百度模糊搜索的实例

基于 Bootstrap Datetimepicker 联动

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接