您的位置：首页 > 其它

拖拽对象

2016-06-08 18:03 295 查看

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}

.box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 5px;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}

.box1 {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 50%;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}
</style>
</head>

<body>
<div class="box" id="box"></div>
<div id="box1" class="box1"></div>
</body>
<script type="text/javascript">
function Drag(option) {
this.obj = option.obj;
this.mouseOffsetX = 0;
this.mouseOffsetY = 0;
this.parentWidth = option.parentWidth;
this.parentHeight = option.parentHeight;
this.init();

}

Drag.prototype = {
init: function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
}
},
mouseDown: function(e) {
var that = this;
this.mouseOffsetX = e.clientX - this.obj.offsetLeft;
this.mouseOffsetY = e.clientY - this.obj.offsetTop;

document.onmousemove = function(e) {
var e = e || window.event;

that.mouseMove(e);
};

document.onmouseup = function() {
that.mouseUp();
}
},
mouseMove: function(e) {
var moveX = e.clientX - this.mouseOffsetX,
moveY = e.clientY - this.mouseOffsetY,
maxX = this.parentWidth - this.obj.offsetWidth,
maxY = this.parentHeight - this.obj.offsetHeight;

moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));

this.obj.style.left = moveX + 'px';
this.obj.style.top = moveY + 'px';
},
mouseUp: function() {
document.onmousemove = null;
document.onmouseup = null;
}

}

Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
return false;
};
};

var drag = new Drag({
obj: document.getElementById("box"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});

var drag = new Drag({
obj: document.getElementById("box1"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航