弾戸をドラッグして、元のjsを実現します.
4429 ワード
直接運行して効果を見ることができて、肝心なところはすでに注釈して説明して、あなたに対してある程度助けがあることを望みます.
//g() dom
function g(id) {
return document.getElementById(id);
}
//
g('dialog_btn').onclick = function () {
g('mask').style.display = 'block';
g('dialog').style.display = 'block';
autoCenter(g('dialog'));
}
//
g('dialog_close').onclick = function () {
g('mask').style.display = 'none';
g('dialog').style.display = 'none';
}
//
function autoCenter(el) {
//
var windowW = document.documentElement.clientWidth;
var windowH = document.documentElement.clientHeight;
//
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = (windowW-elW)/2 + 'px';
el.style.top = (windowH-elH)/2 + 'px';
}
//
//document.attachEvent IE ， ，firefox、chrome css -moz-user-select: none; -webkit-user-select: none;
if(document.attachEvent) {
g('dialog').attachEvent('onselectstart', function () {
return false;
})
}
// ，
window.onresize = function () {
autoCenter(g('dialog'));
}
//
//1. ， ，
//2. ，
//3. ，
//4.
var mx = 0; // x,y ( left top)
var my = 0;
var dx = 0; // x,y
var dy = 0;
var isDraging = false; //
//
g('move_part').addEventListener('mousedown', function (e) {
var e = e || window.event; // ，window.event IE
mx = e.pageX; // X
my = e.pageY; // Y
dx = g('dialog').offsetLeft; //
dy = g('dialog').offsetTop; //
isDraging = true; //
})
//
// onmousemove
document.onmousemove = function (e) {
var e = e || window.event;
var x = e.pageX; // X
var y = e.pageY; // X
if(isDraging) {
var moveX = x - mx + dx; // + left = left
var moveY = y - my + dy; // top
//
//
var pageW = document.documentElement.clientWidth;
var pageH = document.documentElement.clientHeight;
//
var dialogW = g('dialog').offsetWidth;
var dialogH = g('dialog').offsetHeight;
var maxX = pageW - dialogW; //x
var maxY = pageH - dialogH; //x
//Math.min() Math.max()
moveX = Math.min(Math.max(0, moveX), maxX); // left , 0-maxX
moveY = Math.min(Math.max(0, moveY), maxY); // top , 0-maxY
//
g('dialog').style.left = moveX + 'px';
g('dialog').style.top = moveY + 'px';
}
}
//
g('move_part').addEventListener('mouseup', function () {
isDraging = false;
})