Code666 (代码贴、代码片段)

[JavaScript] js 窗口拖动效果 →→→→→进入此内容的聊天室

来自 , 2019-10-23, 写在 JavaScript, 查看 144 次.
URL http://www.code666.cn/view/c5bbd980
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>js 拖动效果</title>
  5. <style type="text/css">
  6. * {
  7.         margin: 0px;
  8.         padding: 0px;
  9. }
  10. .moving {
  11.         opacity: 0.6;
  12.         filter: alpha(opacity = 60);
  13.         cursor: move
  14. }
  15. .maindiv {
  16.         width: 960px;
  17.         border: 1px solid #069;
  18.         padding: 1px;
  19.         margin-top: 0;
  20.         margin-right: auto;
  21.         margin-bottom: 0;
  22.         margin-left: auto;
  23. }
  24. .bigdiv {
  25.         width: 960px;
  26.         height: 1000px;
  27.         overflow: hidden;
  28.         position: relative;
  29. }
  30. #mmdiv {
  31.         width: 300px;
  32.         height: 100px;
  33.         left: 30px;
  34.         top: 50px;
  35.         border: 2px solid #999;
  36.         overflow: hidden;
  37.         padding: 1px;
  38. }
  39. #mmdiv h3 {
  40.         width: 100%;
  41.         height: 30px;
  42.         line-height: 30px;
  43.         cursor: move;
  44.         background-color: #999;
  45. }
  46. #mmdiv h3 span {
  47.         margin-left: 20px;
  48. }
  49. </style>
  50. <script type="text/javascript">
  51.         var base = {
  52.                 getId : function(id) {
  53.                         return document.getElementById(id);
  54.                 },
  55.                 addEvent : function(elem, type, fn) {
  56.                         if (elem.addEventListener) {
  57.                                 elem.addEventListener(type, fn, false);
  58.                         } else if (elem.attachEvent) {
  59.                                 elem.attachEvent("on" + type, fn);
  60.                         } else {
  61.                                 elem["on" + type] = fn;
  62.                         }
  63.                 },
  64.                 removeEvent : function(elem, type, fn) {
  65.                         if (elem.removeEventListener) {
  66.                                 elem.removeEventListener(type, fn, false);
  67.                         } else if (elem.detachEvent) {
  68.                                 elem.detachEvent("on" + type, fn);
  69.                         } else {
  70.                                 elem["on" + type] = null;
  71.                         }
  72.                 },
  73.                 unDefaultEvent : function(event) {
  74.                         if (event && event.preventDefault) {
  75.                                 event.preventDefault();
  76.                         } else {
  77.                                 event.returnValue = false;
  78.                         }
  79.                 },
  80.                 page : function(event) {
  81.                         return {
  82.                                 x : event.pageX || event.clientX
  83.                                                 + document.documentElement.scrollLeft,
  84.                                 y : event.pageY || event.clientY
  85.                                                 + document.documentElement.scrollTop
  86.                         };
  87.                 },
  88.                 unSelection : function() {
  89.                         if (document.selection && document.selection.empty) {
  90.                                 document.selection.empty();
  91.                         } else if (window.getSelection) {
  92.                                 window.getSelection().removeAllRanges();
  93.                         }
  94.                 }
  95.         };
  96.  
  97.         function Drag() {
  98.                 this.dragInit.apply(this, arguments);
  99.         }
  100.  
  101.         Drag.prototype = {
  102.                 dragInit : function(obj, options) {
  103.                         this.obj = obj;
  104.                         this.obj.style.position = "absolute";
  105.                         this.setOptions(options);
  106.                         this.handle = this.options.handle || obj;
  107.                         this.bigcont = this.options.bigcont || document.documentElement;
  108.                         this.moveCss = this.options.moveCss;
  109.                         this.lock = this.options.lock;
  110.                         this.lockX = this.options.lockX;
  111.                         this.lockY = this.options.lockY;
  112.                         var _this = this;
  113.                         base.addEvent(this.handle, "mousedown", function(event) {
  114.                                 _this.startDrap(event);
  115.                         });
  116.                 },
  117.                 setOptions : function(options) {
  118.                         this.options = {
  119.                                 handle : "",
  120.                                 bigcont : "",
  121.                                 lock : false,
  122.                                 lockX : false,
  123.                                 lockY : false,
  124.                                 moveCss : ""
  125.                         };
  126.  
  127.                         for ( var p in options) {
  128.                                 this.options[p] = options[p];
  129.                         }
  130.                 },
  131.                 startDrap : function(event) {
  132.                         base.unDefaultEvent(event);
  133.                         var _this = this;
  134.  
  135.                         this.disX = base.page(event).x - this.obj.offsetLeft;
  136.                         this.disY = base.page(event).y - this.obj.offsetTop;
  137.  
  138.                         this.mousemoveHandle = function(event) {
  139.                                 _this.move(event);
  140.                         };
  141.  
  142.                         this.mouseupHandle = function() {
  143.                                 _this.stopDrag();
  144.                         };
  145.  
  146.                         base.addEvent(document, "mousemove", this.mousemoveHandle);
  147.  
  148.                         base.addEvent(document, "mouseup", this.mouseupHandle);
  149.  
  150.                         base.unSelection();
  151.  
  152.                         if (this.obj.setCapture) {
  153.                                 this.obj.setCapture(true);
  154.                         }
  155.                 },
  156.                 move : function(event) {
  157.                         base.unDefaultEvent(event);
  158.                         this.obj.className = this.moveCss;
  159.  
  160.                         var x = base.page(event).x - this.disX;
  161.                         var y = base.page(event).y - this.disY;
  162.  
  163.                         var range = {
  164.                                 minX : this.bigcont.scrollLeft,
  165.                                 minY : this.bigcont.scrollTop,
  166.                                 maxX : this.bigcont.scrollWidth - this.obj.offsetWidth,
  167.                                 maxY : this.bigcont.scrollHeight - this.obj.offsetHeight
  168.                         };
  169.  
  170.                         x = Math.max(x, range.minX);
  171.                         x = Math.min(x, range.maxX);
  172.                         y = Math.max(y, range.minY);
  173.                         y = Math.min(y, range.maxY);
  174.  
  175.                         if (true == this.lockX && true == this.lockY) {
  176.                         } else if (true == this.lockX) {
  177.                                 this.obj.style.left = x + "px";
  178.                         } else if (true == this.lockY) {
  179.  
  180.                                 this.obj.style.top = y + "px";
  181.                         } else {
  182.                                 this.obj.style.left = x + "px";
  183.                                 this.obj.style.top = y + "px";
  184.                         }
  185.  
  186.                 },
  187.                 stopDrag : function() {
  188.                         this.obj.className = "";
  189.                         base.removeEvent(document, "mousemove", this.mousemoveHandle);
  190.                         base.removeEvent(document, "mouseup", this.mouseupHandle);
  191.                         if (this.obj.releaseCapture) {
  192.                                 this.obj.releaseCapture(true);
  193.                         }
  194.                 }
  195.         };
  196.  
  197.         base.addEvent(window, "load", function() {
  198.                 var tmp = base.getId("mmdiv");
  199.                 var bigdiv = base.getId("bigdiv");
  200.                 var tit = tmp.getElementsByTagName("h3")[0];
  201.                 var b = new Drag(tmp, {
  202.                         "handle" : tit,
  203.                         "bigcont" : bigdiv,
  204.                         "lockX" : false,
  205.                         "lockY" : false
  206.                 });
  207.                 var btn = document.getElementsByTagName("input");
  208.  
  209.                 btn[0].onclick = function() {
  210.  
  211.                         b.lockX = false;
  212.                         b.lockY = false;
  213.                 }
  214.  
  215.                 btn[1].onclick = function() {
  216.  
  217.                         b.lockX = true;
  218.                         b.lockY = false;
  219.                 }
  220.                 btn[2].onclick = function() {
  221.  
  222.                         b.lockX = false;
  223.                         b.lockY = true;
  224.                 }
  225.                 btn[3].onclick = function() {
  226.  
  227.                         b.lockX = true;
  228.                         b.lockY = true;
  229.                 }
  230.         });
  231. </script>
  232. </head>
  233. <body>
  234. <div class="maindiv">
  235.   <div>
  236.     <input type="button" value="范围拖动" />
  237.     <input type="button" value="水平拖动" />
  238.     <input type="button" value="垂直拖动" />
  239.     <input type="button" value="静止" />
  240.   </div>
  241.   <div id="bigdiv" class="bigdiv" style="background-color: #EEE">
  242.     <div id="mmdiv">
  243.       <h3><span>拖动我</span></h3>
  244.     </div>
  245.   </div>
  246. </div>
  247. </body>
  248. </html>
  249.  

回复 "js 窗口拖动效果"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666