<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖动弹出框</title> <style> .top_box{ font-weight:bold;">#6796cc; height:30px; line-height: 30px; color: #fff; padding-left: 20px; } .b_box{ width: 300px; height:300px; box-shadow: 2px 1px 4px #000; } .drag{ width: 100%; height: 30px; line-height: 30px; font-weight:bold;">#06b8cc; color: #fff; cursor: move; } .b_box{ display: none; position:absolute; margin: 100px; } a{ text-decoration: none; color: #fff; } </style></head><body><div class="top_box"><a href="javascript:;" id="register">注册信息</a> </div><div class="b_box" id="b_box"> <div class="drag" id="drag"> 注册信息（可以拖拽） <span>关闭</span> </div></div></body><script> var register = document.getElementById("register"); var b_box = document.getElementById("b_box"); register.onclick = function(){ b_box.style.display = "block" } //鼠标按下移动时，先计算出b_box起始位置到屏幕的距离 var drag = document.getElementById("drag"); drag.onmousedown = function(event){ var event = event || window.event; var x = event.clientX - b_box.offsetLeft + 100; var y = event.clientY - b_box.offsetTop +100 ; document.onmousemove = function(event){ var event = event || window.event; b_box.style.left = event.clientX - x +"px"; b_box.style.top = event.clientY - y +"px"; // 防止拖动过程中选择文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } //鼠标弹起之后 结束操作 document.onmouseup = function(){ document.onmousemove = null; } }
</script></html>
时间： 2024-10-10 15:03:20