js框选功能（得到dom标签）

<html>

<head>

<style>

body {

margin: 0;

padding: 0;

}

#index_wrap {

width: 100%; /* 演示宽高与位置 */

height:100vh;

border: 1px solid #eee;

}

.wrap_item {

display: inline-block;

width: 100px;

height: 100px;

margin: 24px;

background-color: #0082CC;

}

</style>

</head>

<body>

</div>

</body>

</html>

(function () {

var mouseStopId;

var mouseOn = false;

var startX = 0;

var startY = 0;

// 获取容器元素

var index_wrap = document.getElementById('index_wrap');

index_wrap.onmousedown = function (e) {

clearEventBubble(e);

if (e.buttons !== 1 || e.which !== 1) return;

mouseStopId = setTimeout(function () {

mouseOn = true;

// 调整坐标原点为容器左上角

startX = e.clientX - index_wrap.offsetLeft + index_wrap.scrollLeft;

startY = e.clientY - index_wrap.offsetTop + index_wrap.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('index_wrap').appendChild(selDiv);

selDiv.style.left = startX + 'px';

selDiv.style.top = startY + 'px';

}, 20);

document.onmousemove = function (e) {

if (!mouseOn) return;

clearEventBubble(e);

var index_wrap = document.getElementById('index_wrap');

var _x = e.clientX - index_wrap.offsetLeft + index_wrap.scrollLeft;

var _y = e.clientY - index_wrap.offsetTop + index_wrap.scrollTop;

var _H = index_wrap.offsetWidth

// 鼠标移动超出容器内部，进行相应的处理

// 向右拖拽

if (e.clientX > index_wrap.offsetLeft + index_wrap.offsetWidth) {

let maxLeft = index_wrap.scrollWidth - index_wrap.offsetWidth

let step = index_wrap.scrollLeft + 20

if (step >= maxLeft) {

index_wrap.scrollLeft = maxLeft

} else {

index_wrap.scrollLeft = step

}

// 向左拖拽

if (e.clientX < index_wrap.offsetLeft) {

let minLeft = 0

let step = index_wrap.scrollLeft - 20

if (step <= minLeft) {

index_wrap.scrollLeft = minLeft

} else {

index_wrap.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)) <= index_wrap.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 wrap_items = document.getElementsByClassName('wrap_item');

var selectedEls = [];

var l = selDiv.offsetLeft;

var t = selDiv.offsetTop;

var w = selDiv.offsetWidth;

var h = selDiv.offsetHeight;

for (var i = 0; i < wrap_items.length; i++) {

var sl = wrap_items[i].offsetWidth + wrap_items[i].offsetLeft;

var st = wrap_items[i].offsetHeight + wrap_items[i].offsetTop;

if (sl > l && st > t && wrap_items[i].offsetLeft < l + w && wrap_items[i].offsetTop < t + h) {

wrap_items[i].style.background = 'red'

selectedEls.push(wrap_items[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>

js框选功能（得到dom标签）

推荐阅读更多精彩内容