JavaScript中的可拖动弹出窗口
我有一个使用java脚本创建的popuo窗口。无法使用JQuery。我想让这个弹出窗口可以拖动。那就是允许它在mousemove上移动。在javascript中是否有实现这一点的方法 如果javascript中有任何单一的函数或方法,这可能会很有帮助。这只是一个普通的弹出窗口。因此,它没有任何限制,但它只在javascript中开发(不能使用jquery)。在此方面的任何帮助都将不胜感激。简单 拖动一个全局布尔变量JavaScript中的可拖动弹出窗口,javascript,Javascript,我有一个使用java脚本创建的popuo窗口。无法使用JQuery。我想让这个弹出窗口可以拖动。那就是允许它在mousemove上移动。在javascript中是否有实现这一点的方法 如果javascript中有任何单一的函数或方法,这可能会很有帮助。这只是一个普通的弹出窗口。因此,它没有任何限制,但它只在javascript中开发(不能使用jquery)。在此方面的任何帮助都将不胜感激。简单 拖动一个全局布尔变量。然后,将三个事件处理程序附加到文档.body 在mousedown上,设置dr
。然后,将三个事件处理程序附加到文档.body
- 在
mousedown
上,设置dragging=true
- 在
mousemove
上,检查是否拖动==true
。如果是,请检查鼠标位置的x,y
(在事件
对象中)。设置元素的css:
position: absolute
left: x + 'px'
top: y + 'px'
- 在
mouseup
上,设置dragging=false
在mousedown
上,您可能还需要测量单击的元素中的确切位置,因此鼠标光标后面是元素中的确切点,而不是元素的左上角
您可能希望将整个内容包装成一个漂亮的类,以避免全局变量并使其可重用:)
你好,世界!
弹出窗口
...
标题[X]
弹出窗口。
按ESC键关闭
(功能(){
变量滚动_宽度=24;
var btn_popup=document.getElementById(“btn_popup”);
var popup=document.getElementById(“popup”);
var popup_-bar=document.getElementById(“popup_-bar”);
var btn_close=document.getElementById(“btn_close”);
var smoke=document.getElementById(“smoke”);
//--让弹出窗口使其可拖动和移动。
变量偏移量={x:0,y:0};
弹出菜单条addEventListener('mousedown',mousedown,false);
window.addEventListener('mouseup',mouseup,false);
函数mouseUp()
{
removeEventListener('mousemove',popupMove,true);
}
功能鼠标向下(e){
offset.x=e.clientX-popup.offsetLeft;
offset.y=e.clientY-popup.offsetTop;
addEventListener('mousemove',popupMove,true);
}
函数popupMove(e){
popup.style.position='绝对';
var top=e.clientY-offset.y;
var left=e.clientX-offset.x;
popup.style.top=top+'px';
popup.style.left=左+像素;
}
//--/让弹出窗口使其可拖动和移动。
window.onkeydown=函数(e){
如果(e.keyCode==27){//如果按了ESC键
btn_关闭。单击(e);
}
}
btn_popup.onclick=函数(e){
//冒烟
散布烟雾(真实);
//复位div位置
popup.style.top=“4px”;
popup.style.left=“4px”;
popup.style.width=window.innerWidth-滚动_width+“px”;
popup.style.height=window.innerHeight-滚动_WIDTH+“px”;
popup.style.display=“block”;
}
btn_close.onclick=函数(e){
popup.style.display=“无”;
smoke.style.display=“无”;
}
window.onresize=函数(e){
散布烟雾();
}
功能烟雾(flg){
smoke.style.width=window.outerWidth+100+“px”;
smoke.style.height=window.outerHeight+100+“px”;
如果(flg!=undefined&&flg==true)smoke.style.display=“block”;
}
}());
在这种情况下,为什么不能使用JQuery?javascript没有类。下面是您想要的,没有jQuery
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
<button id="btn_popup">popup</button>
<div id="smoke"style="display:none;position:absolute;top:-30px;left:-30px;opacity:0.3;background-color:black;z-index:9998">...</div>
<div id="popup" style="display:none;background-color:green;position:absolute;top:0px;z-index:9999;box-shadow: 6px 6px 5px #888888;border-radius:6px;border:1px solid #4f4f4f;">
<div id="popup_bar" style="width:100%;background-color:#aaff66;position:relative;top:0;border-radius:6px 6px 0 0; text-align:center;height:24px;cursor:move">Title<span id="btn_close" style="float:right;cursor:pointer;padding-right:6px;">[X]</span></div>
<p>Popup Window.<br>Press ESC to close.</p>
</div>
</body>
<script>
(function(){
var SCROLL_WIDTH = 24;
var btn_popup = document.getElementById("btn_popup");
var popup = document.getElementById("popup");
var popup_bar = document.getElementById("popup_bar");
var btn_close = document.getElementById("btn_close");
var smoke = document.getElementById("smoke");
//-- let the popup make draggable & movable.
var offset = { x: 0, y: 0 };
popup_bar.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
function mouseUp()
{
window.removeEventListener('mousemove', popupMove, true);
}
function mouseDown(e){
offset.x = e.clientX - popup.offsetLeft;
offset.y = e.clientY - popup.offsetTop;
window.addEventListener('mousemove', popupMove, true);
}
function popupMove(e){
popup.style.position = 'absolute';
var top = e.clientY - offset.y;
var left = e.clientX - offset.x;
popup.style.top = top + 'px';
popup.style.left = left + 'px';
}
//-- / let the popup make draggable & movable.
window.onkeydown = function(e){
if(e.keyCode == 27){ // if ESC key pressed
btn_close.click(e);
}
}
btn_popup.onclick = function(e){
// smoke
spreadSmoke(true);
// reset div position
popup.style.top = "4px";
popup.style.left = "4px";
popup.style.width = window.innerWidth - SCROLL_WIDTH + "px";
popup.style.height = window.innerHeight - SCROLL_WIDTH + "px";
popup.style.display = "block";
}
btn_close.onclick = function(e){
popup.style.display = "none";
smoke.style.display = "none";
}
window.onresize = function(e){
spreadSmoke();
}
function spreadSmoke(flg){
smoke.style.width = window.outerWidth + 100 + "px";
smoke.style.height = window.outerHeight + 100 + "px";
if (flg != undefined && flg == true) smoke.style.display = "block";
}
}());
</script>
</html>