<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var div = document.createElement('div');//动态创建div
div.style.height = 200 + 'px';
div.style.width = 200 + 'px';
div.style.background = 'orange';
div.style.borderRadius = 50 + '%';
div.id = 'div';
div.style.position = 'absolute';
document.body.appendChild(div);
function Drag (id) { //构造拖动函数
this.obj = document.getElementById(id);
this.clientx = 0;
this.clienty = 0;
};
Drag.prototype.Init = function (){
var othis = this; //保存this指针
this.obj.onmousedown = function () {
othis.mouseDown();
}
};
Drag.prototype.mouseDown = function (e) {
var e = e || window.event;
var othis = this;
this.clientx = e.clientX - this.obj.offsetLeft;//获取鼠标初始坐标
this.clienty = e.clientY - this.obj.offsetTop;
document.onmousemove = function () {
othis.mouseMove()
};
document.onmouseup = function () {
othis.mouseUp()
}
};
Drag.prototype.mouseMove = function (e) {
var e = e || window.event;
this.obj.style.left = (e.clientX - this.clientx ) + 'px';//div实际移动的距离 = 鼠标点击之后的坐标 - 鼠标的初始坐标
this.obj.style.top = (e.clientY - this.clienty) + 'px';
};
Drag.prototype.mouseUp = function () {
document.onmousemove = null;
document.onmouseup = null;
};
var box = new Drag('div');//new 对象
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var div = document.createElement('div');//动态创建div
div.style.height = 200 + 'px';
div.style.width = 200 + 'px';
div.style.background = 'orange';
div.style.borderRadius = 50 + '%';
div.id = 'div';
div.style.position = 'absolute';
document.body.appendChild(div);
function Drag (id) { //构造拖动函数
this.obj = document.getElementById(id);
this.clientx = 0;
this.clienty = 0;
};
Drag.prototype.Init = function (){
var othis = this; //保存this指针
this.obj.onmousedown = function () {
othis.mouseDown();
}
};
Drag.prototype.mouseDown = function (e) {
var e = e || window.event;
var othis = this;
this.clientx = e.clientX - this.obj.offsetLeft;//获取鼠标初始坐标
this.clienty = e.clientY - this.obj.offsetTop;
document.onmousemove = function () {
othis.mouseMove()
};
document.onmouseup = function () {
othis.mouseUp()
}
};
Drag.prototype.mouseMove = function (e) {
var e = e || window.event;
this.obj.style.left = (e.clientX - this.clientx ) + 'px';//div实际移动的距离 = 鼠标点击之后的坐标 - 鼠标的初始坐标
this.obj.style.top = (e.clientY - this.clienty) + 'px';
};
Drag.prototype.mouseUp = function () {
document.onmousemove = null;
document.onmouseup = null;
};
var box = new Drag('div');//new 对象
box.Init();
</script>
</body>
</html>
3917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
