JavaScript实现框选效果
<html>
<head>
<title>region</title>
<style>
body {
margin: 0;
padding: 0;
}
#selectContainer {
position: relative;
width: 400px; /* 演示宽高与位置 */
height: 400px;
top: 200px;
left: 200px;
border: 1px solid #eee;
overflow: hidden;
overflow-x: auto;
}
.fileDiv {
display: inline-block;
width: 100px;
height: 100px;
margin: 24px;
background-color: #0082CC;
float: left;
}
.wrapper {
width: 1080px;
}
</style>
</head>
<body>
<div id="selectContainer">
<div class="wrapper">
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
<div class="fileDiv"></div>
</div>
</div>
</body>
</html> <script>
(function () {
var mouseStopId;
var mouseOn = false;
var startX = 0;
var startY = 0;
// 获取容器元素
var selectContainer = document.getElementById('selectContainer');
selectContainer.onmousedown = function (e) {
clearEventBubble(e);
if (e.buttons !== 1 || e.which !== 1) return;
mouseStopId = setTimeout(function () {
mouseOn = true;
// 调整坐标原点为容器左上角
startX = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft;
startY = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop;
var selDiv = document.createElement('div');
selDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #eee;background-color:#aaa;z-index:1000;opacity:0.6;display:none;';
selDiv.id = 'selectDiv';
// 添加框选元素到容器内
document.getElementById('selectContainer').appendChild(selDiv);
selDiv.style.left = startX + 'px';
selDiv.style.top = startY + 'px';
}, 20);
document.onmousemove = function (e) {
if (!mouseOn) return;
clearEventBubble(e);
var selectContainer = document.getElementById('selectContainer');
var _x = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft;
var _y = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop;
var _H = selectContainer.offsetWidth
// 鼠标移动超出容器内部，进行相应的处理
// 向右拖拽
if (e.clientX > selectContainer.offsetLeft + selectContainer.offsetWidth) {
let maxLeft = selectContainer.scrollWidth - selectContainer.offsetWidth
let step = selectContainer.scrollLeft + 20
if (step >= maxLeft) {
selectContainer.scrollLeft = maxLeft
} else {
selectContainer.scrollLeft = step
}
}
// 向左拖拽
if (e.clientX < selectContainer.offsetLeft) {
let minLeft = 0
let step = selectContainer.scrollLeft - 20
if (step <= minLeft) {
selectContainer.scrollLeft = minLeft
} else {
selectContainer.scrollLeft = step
}
}
var selDiv = document.getElementById('selectDiv');
selDiv.style.display = 'block';
selDiv.style.left = Math.min(_x, startX) + 'px';
selDiv.style.top = Math.min(_y, startY) + 'px';
if ((Math.min(_x, startX) + Math.abs(_x - startX)) <= selectContainer.scrollWidth) {
selDiv.style.width = Math.abs(_x - startX) + 'px';
}
selDiv.style.height = Math.abs(_y - startY) + 'px';
};
document.onmouseup = function (e) {
if (!mouseOn) return;
clearEventBubble(e);
var selDiv = document.getElementById('selectDiv');
var fileDivs = document.getElementsByClassName('fileDiv');
var selectedEls = [];
var l = selDiv.offsetLeft;
var t = selDiv.offsetTop;
var w = selDiv.offsetWidth;
var h = selDiv.offsetHeight;
for (var i = 0; i < fileDivs.length; i++) {
var sl = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft;
var st = fileDivs[i].offsetHeight + fileDivs[i].offsetTop;
if (sl > l && st > t && fileDivs[i].offsetLeft < l + w && fileDivs[i].offsetTop < t + h) {
fileDivs[i].style.background = 'red'
selectedEls.push(fileDivs[i]);
}
}
console.log(selectedEls);
selDiv.style.display = 'none';
mouseOn = false;
};
}
function clearEventBubble (e) {
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true; if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
})();
</script>
JavaScript实现框选效果的更多相关文章
- unity实现框选效果
思路: 在uinity中既可以将屏幕坐标转换为世界坐标,也可以将世界坐标转换为屏幕坐标.这样的话我们就可以通过判断物体在世界坐标转换为平幕坐标是否在鼠标框选的矩形区域坐标内,来判断物体是否在框选范围. ...
- vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
- Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载
- javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
- javascript练习----复选框全选，全不选，反选
第一种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- jQuery实现全选效果【转】
这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...
- 原生js实现在表格用鼠标框选并有反选功能
今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...
- Javascript实现全选按钮
Javascript实现全选按钮 效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...
- avalon全选效果分析讲解
全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...
随机推荐
- C# Winform ListView控件
一.ListView: 1.视图改为为Detalis: 2.编辑列,每添加一个添加一列,右侧属性Text改列名,停靠位置,列头的长度等等: 3.右侧属性,点开Iteme,添加ListViewItem集 ...
- 网上找的Backbone.js
// Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely ...
- coockie 和 session
一.Cookie Cookie的数据是由客户端来保存和携带的,所以称之为客户端技术. 1.属性: name:名称不能唯一确定一个Cookie.路径可能不同. value:不能存中文. path:默认值 ...
- java的零拷贝机制
转:https://blog.csdn.net/zhouhao88410234/article/details/77574689?fps=1&locationNum=9 为何要懂零拷贝原理?因 ...
- （栈）leetcode 946. Validate Stack Sequences
Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...
- php项目核心业务（增、删、改、查）（第三篇）
对增删改查数据库的封装 //php对数据库的封装 //Mysql_fetach($sql)函数查询所有的 function Mysql_fetach($sql){ $conn=mysqli_conne ...
- 用Jdbc连接数据库后实现增删改查功能
增删改用的都是executeUpdate()方法: 查用的是executeQuery()方法 package cn.lideng.dbc; import java.lang.management.Ma ...
- Java运算符和引用数据类型（Scanner、Random）
运算符 算术运算符: 运算符 运算规则 范例 结果 + 正号 +3 3 + 加 2+3 5 + 连接字符串 “中”+“国” “中国” - 负号 int a=3;-a -3 - 减 3-1 2 * 乘 ...
- jmeter counter函数问题
${__counter(FALSE,)}此函数比较奇怪,放在jsr223前置处理器中引用时不知道为啥,第一个值是2.但是放在其他位置时第一个值是1 真是诡异啊!不知道是不是bug呢 放在标题里引用,t ...
- kubernetes1.5.2 dashboard配置
镜像:https://hub.daocloud.io/#!/repos/f8919a2c-2540-424e-8758-d23cc76b6d80 启动Kubernetes集群 配置Kubernetes ...