这是一段js代码,通过这段代码控制一个小div在一个大div内拖动,但是不能离开大div。现在有一些小BUG就是,一旦鼠标再点下的情况下,离开大div,就会停止小div的跟随,但是,再点的话,取药点两次才能在此拖动,请大神解决!!!
window.onload = function() {
//大的div
var TuoDongQu = document.querySelector(".Tdq");
//小的div
var TuoDongKuai = document.querySelector(".Tdk");
//当鼠标点下
TuoDongKuai.onmousedown = function(evt) {
var _event = evt || event;
TuoDongQu.onmousemove = function(evt) {
var _event = evt || event;
//鼠标点下时永远在小div的正中间
var _left = _event.clientX - TuoDongKuai.offsetWidth / 2;
var _top = _event.clientY - TuoDongKuai.offsetHeight / 2;
//小div不能离开大div的左右两边。
if(_left < 300) {
_left = 300;
TuoDongQu.onmousemove = null;
} else
if(_left > (TuoDongQu.offsetWidth - TuoDongKuai.offsetWidth + 300)) {
_left = TuoDongQu.offsetWidth - TuoDongKuai.offsetWidth + 300;
TuoDongQu.onmousemove = null;
}
//小div不能离开大div的上下两边。
if(_top < 80) {
_top = 80;
TuoDongQu.onmousemove = null;
} else
if(_top > (TuoDongQu.offsetHeight - TuoDongKuai.offsetHeight + 80)) {
_top = TuoDongQu.offsetHeight - TuoDongKuai.offsetHeight + 80;
TuoDongQu.onmousemove = null;
}
//小div的位置
TuoDongKuai.style.left = _left + "px";
TuoDongKuai.style.top = _top + "px";
}
}
//松开鼠标时停止小div跟随
TuoDongKuai.onmouseup = function() {
TuoDongQu.onmousemove = null;
}
}
window.onload = function() {
//大的div
var TuoDongQu = document.querySelector(".Tdq");
//小的div
var TuoDongKuai = document.querySelector(".Tdk");
//当鼠标点下
TuoDongKuai.onmousedown = function(evt) {
var _event = evt || event;
TuoDongQu.onmousemove = function(evt) {
var _event = evt || event;
//鼠标点下时永远在小div的正中间
var _left = _event.clientX - TuoDongKuai.offsetWidth / 2;
var _top = _event.clientY - TuoDongKuai.offsetHeight / 2;
//小div不能离开大div的左右两边。
if(_left < 300) {
_left = 300;
TuoDongQu.onmousemove = null;
} else
if(_left > (TuoDongQu.offsetWidth - TuoDongKuai.offsetWidth + 300)) {
_left = TuoDongQu.offsetWidth - TuoDongKuai.offsetWidth + 300;
TuoDongQu.onmousemove = null;
}
//小div不能离开大div的上下两边。
if(_top < 80) {
_top = 80;
TuoDongQu.onmousemove = null;
} else
if(_top > (TuoDongQu.offsetHeight - TuoDongKuai.offsetHeight + 80)) {
_top = TuoDongQu.offsetHeight - TuoDongKuai.offsetHeight + 80;
TuoDongQu.onmousemove = null;
}
//小div的位置
TuoDongKuai.style.left = _left + "px";
TuoDongKuai.style.top = _top + "px";
}
}
//松开鼠标时停止小div跟随
TuoDongKuai.onmouseup = function() {
TuoDongQu.onmousemove = null;
}
}