<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {
400px;
margin: 30px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0;
display: inline;
}
.list li {
font: 14px/40px "宋体";
border-bottom: 1px solid #000;
}
.list .active {
background: #f1f1f1;
}
#img {
position: fixed;
left: 0;
top: 0;
}
.info{
position: fixed;
80px;
font: 12px/30px "宋体";
text-align: center;
border: 1px solid #000;
background: #333;
color: #fff;
}
.select {
position: fixed;
box-sizing: border-box;
border: 1px solid blue;
background: rgba(0,0,255,.2);
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li>
<input type="checkbox" name="">
<p>这是li的内容11111111111</p>
</li>
<li>
<input type="checkbox" name="">
<p>这是li的内容2222222222</p>
</li>
<li>
<input type="checkbox" name="">
<p>这是li的内容3333333333</p>
</li>
<li>
<input type="checkbox" name="">
<p>这是li的内容4444444444</p>
</li>
<li>
<input type="checkbox" name="">
<p>这是li的内容5555555555</p>
</li>
<li>
<input type="checkbox" name="">
<p>这是li的内容6666666666</p>
</li>
</ul>
<div>
<input type="checkbox" class="checkAll"><a href="javascript:;" id="btn">删除选中</a>
<img src="img/timg.jpg" id="img" width="50">
</div>
</div>
<script type="text/javascript">
(function(){
var list = document.querySelector('.list');
var lists = list.querySelectorAll('li');
var checkAll = document.querySelector('.checkAll');
var btn = document.querySelector('#btn');
var img = document.querySelector('#img');
/* 删除选中 */
btn.addEventListener('click', delSelect);
function delSelect() {
var inputs = list.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].checked){
list.removeChild(inputs[i].parentNode);
}
}
checkAll.checked = false;
}
/* li的移入移出 */
lists.forEach(function(li){
li.onmouseover = function(){
li.className = "active";
};
li.onmouseout = function(){
var input = li.querySelector('input');
if(!input.checked){
li.className = "";
}
};
li.addEventListener("mousedown",dragDel);//拖拽删除
li.addEventListener("mousedown",dragSelect);//框选
});
/* 全选和全不选 */
var inputs = list.querySelectorAll('input');
inputs.forEach(function(val){
val.onchange = function(){
checkAll.checked = getChecked();
}
val.onmousedown = function(e){
e.cancelBubble = true;
}
});
checkAll.onchange = function(){
var lists = list.querySelectorAll('li');
var inputs = list.querySelectorAll('input');
for(var i = 0; i < inputs.length;i++){
inputs[i].checked = this.checked;
lists[i].className = this.checked?"active":"";
}
}
/* 获取当前的选中状态 */
function getChecked(){
var inputs = list.querySelectorAll('input');
return getCheckNub()==inputs.length?true:false;
}
//获取当前选中了多少个
function getCheckNub(){
var inputs = list.querySelectorAll('input');
var nub = 0;
for(var i = 0; i < inputs.length;i++){
if(inputs[i].checked){
nub++;
}
}
return nub;
}
// 拖拽删除功能
function dragDel(e){
//判断当前是选中的在执行，拖拽删除
if(!this.children[0].checked){
return;
}
e.preventDefault();
var info = document.createElement("span");
info.className = "info";
//getCheckNub()
info.innerHTML = `当前选中了${getCheckNub()}个`;
info.style.left = e.clientX + "px";
info.style.top = e.clientY + "px";
document.body.appendChild(info);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',end);
function move(e){
info.style.left = e.clientX + "px";
info.style.top = e.clientY + "px";
}
function end(e){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',end);
//如果碰撞了垃圾桶需要删除选中的
if(getColl(info,img)){
//删除选中
delSelect();
}
document.body.removeChild(info);
}
}
function dragSelect(e){
//判断当前不是选中的在执行，拖拽删除
if(this.children[0].checked){
return;
}
e.preventDefault();
var lists = list.querySelectorAll('li');
var inputs = list.querySelectorAll('input');
var select = document.createElement("span");
var startX = e.clientX;
var startY = e.clientY;
select.className = "select";
select.style.left = startX + "px";
select.style.top = startY + "px";
document.body.appendChild(select);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',end);
function move(e){
var nowX = e.clientX;
var nowY = e.clientY;
select.style.width = Math.abs(nowX - startX) + "px";
select.style.height = Math.abs(nowY - startY)+ "px";
select.style.left = Math.min(nowX,startX) + "px";
select.style.top = Math.min(nowY,startY) + "px";
for(var i = 0; i < lists.length; i++){
if(getColl(select,lists[i])){
inputs[i].checked = true;
lists[i].className = "active";
} else {
inputs[i].checked = false;
lists[i].className = "";
}
}
}
function end(e){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',end);
document.body.removeChild(select);
}
}
//碰撞检测
function getColl(el,el2){
var rect = el.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
if(rect.top > rect2.bottom
||rect.bottom < rect2.top
||rect.left > rect2.right
||rect.right < rect2.left){
return false
}
return true;
}
})();
</script>
</body>
</html>