窗口拖拽效果请教

javascript 窗口拖拽 

解决方案 »

  1.   

    直接上代码
    <!doctype html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <script src="js/jquery-1.9.1.min.js"></script>
      <title>sample</title>
      <style type="text/css">
      .dialog{position:absolute;left:100px;top:100px;width:500px;height:300px;border:solid 1px black;background-color:white;}
      .dialog .title{height:30px;background-color:gray;cursor:move;}
      .dialog .title .close{position:absolute;top:5px;right:5px;width:18px;height:18px;line-height:18px;text-align:center;border:solid 1px black;background-color:white;cursor:pointer;}
      </style>
    </head><body>
    <div id="dialog" class="dialog">
      <div class="title">
        <div class="close">#</div>
      </div>
    </div>
    <script type="text/javascript">
    function dialog(d) {
      var ox, oy;
      var moveable = false;
      var handler = $("<div style='position:absolute;border:dashed 1px black;z-index:1000;cursor:move;display:none'></div>").appendTo(document.body);  $(d).find(".close").mousedown(function() {
        if (!moveable) {
          $(d).hide();
          return false;
        }
      });  $(d).find(".title").mousedown(function(e) {
        var x = $(d).css("left");
        var y = $(d).css("top");
        ox = e.clientX - parseInt(x);
        oy = e.clientY - parseInt(y);
        handler.css("left", x).css("top", y).css("width", $(d).width()).css("height", $(d).height()).show();
        moveable = true;
      });  handler.mousemove(function(e) {
        if (moveable) {
          var x = e.clientX - ox;
          var y = e.clientY - oy;
          $(this).css("left", x).css("top", y);
        }
      });  handler.mouseup(function(e) {
        moveable = false;
        $(d).stop(true, false).animate({left: $(this).css("left"), top: $(this).css("top")}, function() {
          handler.hide();
        });
      });
    }jQuery(document).ready(function() {
      dialog("#dialog");
    });
    </script>
    </body>