<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<style>
#box {
Position:absolute;
width:50px;
height:50px;
Background-color: #FF6E3D;
left:0px;
top:0px;
border-radius:50%;
box-shadow:5px 5px 15px Rgba (42, 56, 123, 0.5);
}
#box span {
width:6px;
height:24px;
Display:block;
Float:left;
margin-top:13px;
margin-left:3px;
border-radius:5px;
Background:green;
}
#box Span:first-child {
margin-left:14px;
}
</style>
<body>
<div id= "box" >
<span></span>
<span></span>
<span></span>
</div>
</body>
<scrip src= "Jquery-1.11.2.min.js" ></script>
<script type= "Text/javascript" >
function Drag (ID) {
This.obj = document.getElementById (id) | | Document.getelementsbyclassname (ID) [0];
THIS.DISX = 0;
This.disy = 0;
}
Drag.prototype.init = function () {
var = this;
This.obj.onmousedown = function (e) {
var e = e | | window.event;
That.mousedown (e);
return false;
};
};
Drag.prototype.mouseDown = function (e) {
var = this;
THIS.DISX = E.clientx-this.obj.offsetleft;
This.disy = E.clienty-this.obj.offsettop;
Document.onmousemove = function (e) {
var e = e | | window.event;
That.mousemove (e);
};
Document.onmouseup = function () {
That.mouseup ();
}
};
Drag.prototype.mouseMove = function (e) {
var temp = E.clientx-this.disx
This.obj.style.left = (E.CLIENTX-THIS.DISX) + ' px ';
if (Temp > 500) {
This.obj.style.left = ' 500px ';
That.mouseup ();
}else if (Temp < 0) {
This.obj.style.left = "0px";
That.mouseup ();
}
Console.log (temp);
This.obj.style.top = (e.clienty-this.disy) + ' px ';
};
Drag.prototype.mouseUp = function () {
Document.onmousemove = null;
Document.onmouseup = null;
};
var drag = new Drag (' box ');
Drag.init ();
</script>
Slider Verification Code
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
