关于javascript:可拖动弹窗原生js实现code

复制代码，可间接运行查看成果，关键处已正文阐明，心愿对你有所帮忙。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 可拖动弹窗 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
        body {background: #f5f5f5; font-size: 14px; color: #333;}
        .dialog_btn_wrap {padding: 100px; text-align: center;}
        #mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.4); display: none;
            -moz-user-select: none; -webkit-user-select: none;}
        #dialog {position: absolute; width: 250px; height: 200px; top: 0; left: 0; border-radius: 10px; z-index: 2; background: #fff; display: none;
            -moz-user-select: none; -webkit-user-select: none;}
        .dialog_head {text-align: center; line-height: 50px; background-color: #ddd; cursor: move;}
        .dialog-body {height: 100px;}
        .dialog-foot {height: 50px; text-align: center; line-height: 50px; background-color: #ddd;}
    </style>
</head>
<body>
 
<div class="dialog_btn_wrap">
    <a class="btn btn-lg btn-primary" id="dialog_btn"> 弹窗 </a>
</div>
 
<!-- 蒙层 -->
<div id="mask"></div>
 
<!-- 弹窗 -->
<div id="dialog">
    <div class="dialog_head" id="move_part"> 可拖拽区域 </div>
    <div class="dialog-body"></div>
    <div class="dialog-foot">
        <a class="btn btn-default" id="dialog_close"> 敞开 </a>
    </div>
</div>
 
<script>
    //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;})
 
</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> 可拖动弹窗 </title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
	<style>
	body {background: #f5f5f5; font-size: 14px; color: #333;}
	.dialog_btn_wrap {padding: 100px; text-align: center;}
	#mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.4); display: none;
	-moz-user-select: none; -webkit-user-select: none;}
	#dialog {position: absolute; width: 250px; height: 200px; top: 0; left: 0; border-radius: 10px; z-index: 2; background: #fff; display: none;
	-moz-user-select: none; -webkit-user-select: none;}
	.dialog_head {text-align: center; line-height: 50px; background-color: #ddd; cursor: move;}
	.dialog-body {height: 100px;}
	.dialog-foot {height: 50px; text-align: center; line-height: 50px; background-color: #ddd;}
	</style>
	</head>
	<body>

	<div class="dialog_btn_wrap">
	<a class="btn btn-lg btn-primary" id="dialog_btn"> 弹窗 </a>
	</div>

	<!-- 蒙层 -->
	<div id="mask"></div>

	<!-- 弹窗 -->
	<div id="dialog">
	<div class="dialog_head" id="move_part"> 可拖拽区域 </div>
	<div class="dialog-body"></div>
	<div class="dialog-foot">
	<a class="btn btn-default" id="dialog_close"> 敞开 </a>
	</div>
	</div>

	<script>
	//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;})

	</script>
	</body>
	</html>

关于javascript:可拖动弹窗原生js实现code

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）