Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
. Wrap {
width:400px;
margin:30px Auto;
}
UL {
margin:0;
padding:0;
List-style:none;
}
p {
margin:0;
Display:inline;
}
. list Li {
font:14px/40px "Song Body";
border-bottom:1px solid #000;
}
. list. Active {
Background: #f1f1f1;
}
#img {
position:fixed;
left:0;
top:0;
}
. info{
position:fixed;
width:80px;
font:12px/30px "Song Body";
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>
<body>
<div class= "Wrap" >
<ul class= "List" >
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 11111111111</p>
</li>
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 2222222222</p>
</li>
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 3333333333</p>
</li>
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 4444444444</p>
</li>
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 5555555555</p>
</li>
<li>
<input type= "checkbox" Name= "" >
<p> This is Li's content 6666666666</p>
</li>
</ul>
<div>
<input type= "checkbox" class= "Checkall" ><a href= "javascript:;" id= "btn" > Delete selected </a>
</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 ');
/* Delete selected */
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's move-in move-out */
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);//drag and drop Delete
Li.addeventlistener ("MouseDown", dragselect);//Box selection
});
/* Select all and do not select */
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 ":";
}
}
/* Get the current check status */
function getchecked () {
var inputs = List.queryselectorall (' input ');
Return Getchecknub () ==inputs.length?true:false;
}
Gets the number of currently selected
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;
}
Drag and drop Delete function
function Dragdel (e) {
Judging is currently selected in the execution, drag-and-drop Delete
if (!this.children[0].checked) {
Return
}
E.preventdefault ();
var info = document.createelement ("span");
Info.classname = "Info";
GETCHECKNUB ()
info.innerhtml = ' currently selected ${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 you crash the trash, you need to delete the selected
if (Getcoll (info,img)) {
Delete selected
Delselect ();
}
Document.body.removeChild (info);
}
}
function Dragselect (e) {
Judging is not currently selected in execution, drag-and-drop Delete
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);
}
}
Collision detection
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>
Every day a JS small demo mail deleted. Key points of Knowledge: event application
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
