小序:
朋友发来一个框选的demo, 但是有一个问题,有时候在框选时会出现 禁止按钮导致有一些问题
今天俺们来搞一搞这个问题
框选效果
点击按住移动出现选中区域松开 选中选中区域的元素
是为了解决禁止选中问题, 就不重头写了
先在百度copy一个框选的效果
/***
* 信息提示组件Toast v1.0
* @param {Object} box 外部容器(必填)
* @param {Object} container 内容容器(必填)
* @param {Object}
* 使用方法
* var toast = new CheckAll({});
* toast.getNature();获取属性(返回list数组)
*/
(function(){
var CheckAll = function(options){
var o = options;
//目标选中
var selList = [];
// 用来存放鼠标点击初始位置
var startX = 0;// 鼠标的x
var startY = 0;// 鼠标的y
var caseX = o.box.offsetLeft; // wrapper到左侧的距离
var caseY = o.box.offsetTop; // wrapper到顶部的距离
var scrollX = o.box.scrollLeft;// scroll向左滚动的距离
var scrollY = o.box.scrollTop;// scroll向上滚动的距离
var oBoxW = o.box.style.width;// wrapper的宽度
var i = 0;
// 定时器id
var mouseStopId,mouseMax;
// 是否开启框选功能
var mouseOn = false;
o.container.onmousedown = function(e) {
console.log(e, '按下')
var fileNodes = o.box.getElementsByTagName(o.tagName);
// console.log(fileNodes);
for ( var i = 0; i < fileNodes.length; i++) {
if (fileNodes[i].className.indexOf(o.slideClassName) != -1) {
fileNodes[i].className = o.slideClassName;
selList.push(fileNodes[i]);
}
}
clearEventBubble(e);
//判断是否为左键按下
if (e.buttons !== 1 || e.which !== 1) return;
mouseOn = true;
// mouseStopId = setTimeout(function () {
caseX = o.box.offsetLeft;
caseY = o.box.offsetTop;
scrollX = o.box.scrollLeft;
scrollY = o.box.scrollTop;
startX = e.clientX - caseX + scrollX;
startY = e.clientY - caseY + scrollY;
// 创建一个框选元素
var selDiv = document.createElement('div');
// 给框选元素添加css样式,这里使用绝对定位
selDiv.style.cssText = 'position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;cursor:default';
// 添加id
selDiv.id = 'selectDiv';
o.container.appendChild(selDiv);
// 根据起始位置,添加定位
selDiv.style.left = startX + 'px';
selDiv.style.top = startY + 'px';
selDiv.style.width = '0px';
selDiv.style.height = '0px';
// }, 300); // 间隔300毫秒后执行,判定这时候鼠标左键被按住不放
}
o.container.addEventListener('mousemove', function (e) {
// 如果并非框选开启,退出
if (!mouseOn) return false;
console.log(e, '移动')
// console.log('move'+ mouseOn)
clearEventBubble(e);
// 处理鼠标移动
caseX = o.box.offsetLeft; // wrapper到左侧的距离
caseY = o.box.offsetTop; // wrapper到顶部的距离
scrollX = o.box.scrollLeft;// scroll向左滚动的距离
scrollY = o.box.scrollTop;// scroll向上滚动的距离
var _x = e.clientX - caseX + scrollX;
var _y = e.clientY - caseY + scrollY;
// 根据坐标给选框修改样式
var selDiv = document.getElementById('selectDiv');
// console.log(selDiv);
selDiv.style.display = 'block';
selDiv.style.left = Math.min(_x, startX) + 'px';
selDiv.style.top = Math.min(_y, startY) + 'px';
selDiv.style.width = Math.abs(_x - startX) + 'px';
selDiv.style.height = Math.abs(_y - startY) + 'px';
//搂取子元素
var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
for ( var i = 0; i < selList.length; i++) {
var sl = selList[i].offsetWidth + selList[i].offsetLeft;
var st = selList[i].offsetHeight + selList[i].offsetTop;
if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
if (selList[i].className.indexOf("seled") == -1) {
selList[i].className = selList[i].className + " seled";
}
} else {
if (selList[i].className.indexOf("seled") != -1) {
selList[i].className = o.slideClassName;
}
}
}
});
// 添加鼠标点击松开事件监听
document.addEventListener('mouseup', function (e) {
mouseOn = false;
clearEventBubble(e);
if (mouseOn) return;
console.log(e, '撒开')
// clearEventBubble(e);
var selDiv = document.getElementById('selectDiv');
var selectedEls = [];
if (selDiv) {
o.container.removeChild(selDiv);
showSelDiv(selList);
}
selList = [];
mouseMax = null;
startX = 0;
startY = 0;
});
}
window.CheckAll = CheckAll;
}());
CheckAll.prototype.getNature = function(){
}
function clearEventBubble(evt) {
if ( evt && evt.stopPropagation ) {
evt.stopPropagation()
}else{
window.evt.cancelBubble = true;
}
}
function showSelDiv(arr) {
var count = 0;
var selInfo = "";
for ( var i = 0; i < arr.length; i++) {
if (arr[i].className.indexOf("seled") != -1) {
count++;
selInfo += arr[i].innerHTML + "\n";
}
}
}
排版就不列出来了, 正常情况
偶尔出现这个的问题,禁止按钮
定位问题
正常情况: 按下 - 移动 - 移动 - 移动 .... - 撒开
非正常情况: 按下 - 移动 - 禁止状态(也可以移动,但是不走我们的事件) - 松开 - 移动 ...一直就没有撒开事件 / 按下 - 撒开
为什么会出现这种情况, 百度过,没有找到类似的,但是有拖拽时候出现这种问题,
问题来源: 拖动时如果碰到相邻元素,会出现禁止符号
个人认为 应该是浏览器的默认行为, 就在事件的同时阻止默认行为就好了
function clearEventBubble(evt) {
if ( evt && evt.preventDefault ) {
evt.preventDefault()
}else{
window.evt.returnValue = false;
}
}
就可以畅快的框选了
就是这么简单 哈哈哈哈