2

I have a popuo window that is created using java script. JQuery cannot be used. I want to make this popup window draggable. That is to allow it to move on mousemove. Is there anyway to make this happen in javascript.

It could be helpful if there is any single function or method in javascript. It is just a normal popup window. So there are no restrictions in it but it is developed only in javascript (cannot make use of jquery). Any help in this regard would be appreciated.

4

2 回答 2

2 
<!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>
于 2015-08-20T08:40:54.600 回答
0

简单的。

有一个全局布尔变量dragging。然后，向您的document.body附加三个事件处理程序。

  • 上mousedown，设置dragging = true

  • 上mousemove，检查是否dragging == true。如果是，请检查x, y鼠标位置（在event对象中）。设置元素的 css：

    position: absolute
left: x + 'px'
top: y + 'px'

  • 上mouseup，设置dragging = false

在 上mousedown，您可能还想测量您单击的元素中的确切位置，因此它是元素中跟随鼠标光标的确切点，而不是元素的左上角。

而且您可能希望将整个事物包装成一个不错的类以避免全局变量并使其可重用:)

于 2012-07-20T11:04:02.387 回答