Chinaunix首页 | 论坛 | 博客

IT民工窝棚qbq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qbq

  • 博客访问： 30462430
  • 博文数量： 708
  • 博客积分： 12163
  • 博客等级： 上将
  • 技术积分： 8240
  • 用 户 组： 普通用户
  • 注册时间： 2007-12-04 20:59
文章分类

全部博文（708）

推荐博文
相关博文
DragDrop

分类： Java

2011-11-14 11:50:47

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3.  <head>
  4.   <title> DragDrop </title>
  5.   <style type="text/css">
  6.   body {
  7.     padding: 0px;
  8.     margin: 0px;
  9.     font-size: 12px;
  10.   }

  12.   #drager {
  13.     width: 150px;
  14.     height: 100px;
  15.     background-color: #85053C;
  16.   }

  18.   #handler {
  19.     width: 100%;
  20.     height: 30px;
  21.     background-color: #FFCC66;
  22.     text-align: center;
  23.   }
  24.   </style>
  25.   <script type="text/javascript">
  26.     var $ = function(id) {
  27.         return 'string' == typeof id ? document.getElementById(id) : id;
  28.     }

  30.     var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
  31.     
  32.     var isIE = navigator.userAgent.indexOf('MSIE') != -1;
  33.     function addEvent(oTarget, sType, fnHandler){
  34.         if(window.attachEvent){
  35.             oTarget.attachEvent("on"+sType, fnHandler)
  36.         }else if(window.addEventListener){
  37.             oTarget.addEventListener(sType, fnHandler, false);
  38.         }else{
  39.             oTarget["on"+sType] = fnHandler;
  40.         }
  41.     }

  43.     function removeEvent(oTarget, sType, fnHandler){
  44.         if(window.detachEvent){
  45.             oTarget.detachEvent("on"+sType, fnHandler);
  46.         }else if(window.removeEventListener){
  47.             oTarget.removeEventListener(sType, fnHandler, false);
  48.         }else {
  49.             oTarget["on"+sType] = null;
  50.         }
  51.     }

  53.     var Extend = function(destination, source){
  54.         for(var pro in source){
  55.             destination[pro] = source[pro];
  56.         }
  57.         return destination;
  58.     }

  60.     var Bind = function(object, fun){
  61.         var args = Array.prototype.slice.call(arguments, 2);
  62.         return function(){
  63.             return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
  64.         }
  65.     }

  67.     var BindAsEventListener = function(object, fun){
  68.         var args = Array.prototype.slice.call(arguments, 2);
  69.         return function(event){
  70.             return fun.apply(object, [event || window.event].concat(args));
  71.         }
  72.     }

  74.     var Class = {
  75.         create: function(){
  76.             return function(){
  77.                 this.initialize.apply(this, arguments);
  78.             }
  79.         }
  80.     }

  82.     var Drag = Class.create();
  83.     Drag.prototype = {
  84.         initialize: function(dragId, options){
  85.             var oThis = this;
  86.             this.Drager = $(dragId);
  87.             this.DisX = this.DisY = 0;
  88.             this.SetOptions(options);
  89.             Extend(this, this.options);
  90.             this.o = this.Handler || this.Drager;
  91.             with(this.Drager.style){position = position != "absolute" && "absolute"};
  92.             this._fM = BindAsEventListener(this, this.MouseMove);
  93.             this._fU = Bind(this, this.MouseUp);
  94.             addEvent(this.o, "mousedown", BindAsEventListener(this, oThis.MouseDown));
  95.             addEvent(this.o, "mouseover", function(){oThis.o.style.cursor = "pointer"});

  97.         },

  99.         SetOptions: function(options){
  100.             this.options = {
  101.                 isLockX: false,
  102.                 isLockY: false,
  103.                 isLock: false,
  104.                 isResize: true,
  105.                 isLimit: true,
  106.                 Handler: $('handler')
  107.             };
  108.             Extend(this.options, options || {});
  109.         },

  111.         MouseDown: function(event){
  112.             if(this.isLock) { this.MouseUp(); return;}
  113.             this.DisX = event.clientX - this.Drager.offsetLeft;
  114.             this.DisY = event.clientY - this.Drager.offsetTop;
  115.             isIE && this.Drager.setCapture();
  116.             addEvent(document,"mousemove",this._fM);
  117.             addEvent(document,"mouseup",this._fU);
  118.         },

  120.         MouseMove: function(event){
  121.             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  122.             var iLeft = event.clientX - this.DisX; var iTop = event.clientY - this.DisY;
  123.             if(this.isLimit){
  124.                 var mxLeft = 0; var mxRight = $d.clientWidth;
  125.                 var mxTop = 0; var mxBottom = $d.clientHeight;
  126.                 iLeft = Math.max(Math.min(iLeft, mxRight - this.Drager.offsetWidth), mxLeft);
  127.                 iTop = Math.max(Math.min(iTop, mxBottom - this.Drager.offsetHeight), mxTop);
  128.             }
  129.             if(!this.isLockX) { this.Drager.style.left = iLeft + "px" };
  130.             if(!this.isLockY) { this.Drager.style.top = iTop + "px" };
  131.         },

  133.         MouseUp: function(){
  134.             removeEvent(document,"mousemove",this._fM);
  135.             removeEvent(document,"mouseup",this._fU);
  136.             isIE && this.Drager.releaseCapture();
  137.         }
  138.     }

  140.   </script>
  141.  </head>

  143.  <body>
  144.      <div id="drager">
  145.         <div id="handler"> Handler </div>
  146.      </div>
  147.  <script type="text/javascript">
  148.         var drag = new Drag('drager', {isLimit:true});
  149.  </script>
  150.  </body>
  151. </html>
阅读(1317) | 评论(0) | 转发(0) |
0

上一篇：Pop up image

下一篇：javascript画圆

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6