Using JS to implement a brick on the page, but when the mouse click drag, the brick on the page to form a drag effect:
At first:
After the mouse click drag:
Implementation code:
<meta charset= "Utf-8" >
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
#zhuantou {
width:120px;
height:60px;
Background-image:url (1.jpg);
position:fixed;
left:100px;
top:50px;
}
</style>
<body>
<div id= "Zhuantou" >
</div>
<script>
var zt=document.queryselector ("#zhuantou");
var Ispressed=false;
var offsetx=0;
var offsety=0;
Zt.onmousedown=function (event) {
Ispressed=true;
This.style.cursor= "Move";
Offsetx=event.offsetx;
Offsety=event.offsety;
};
Zt.onmouseup=function () {
Ispressed=false;
This.style.cursor= "Default";
};
Zt.onmousemove=function (event) {
if (!ispressed) {
Return
}
Zt.style.left= (EVENT.CLIENTX-OFFSETX) + "px";
Zt.style.top= (EVENT.CLIENTY-OFFSETX) + "px";
};
</script>
</body>
JS implementation of a brick in the page drag effect