zoukankan      html  css  js  c++  java
  • base库插件---拖动

     1 /**
     2  * Created by Administrator on 2014/6/5 0005.  Base-drag 基于Base库的拖拽插件  tags为你要拖拽的元素参数, 数组形式传入
     3  */
     4 
     5 $().extend('drag', function () {
     6     var tags = arguments;
     7     for (var i = 0; i < this.elements.length; i ++) {
     8         addEvent(this.elements[i], 'mousedown', function (e) {
     9             if (trim(this.innerHTML).length == 0) e.preventDefault();
    10             var _this = this;
    11             var diffX = e.clientX - _this.offsetLeft;
    12             var diffY = e.clientY - _this.offsetTop;
    13 
    14             //自定义拖拽区域
    15             var flag = false;
    16 
    17             for (var i = 0; i < tags.length; i ++) {
    18                 if (e.target == tags[i]) {
    19                     flag = true;                    //只要有一个是true,就立刻返回
    20                     break;
    21                 }
    22             }
    23 
    24             if (flag) {
    25                 addEvent(document, 'mousemove', move);
    26                 addEvent(document, 'mouseup', up);
    27             } else {
    28                 removeEvent(document, 'mousemove', move);
    29                 removeEvent(document, 'mouseup', up);
    30             }
    31 
    32             function move(e) {
    33                 var left = e.clientX - diffX;
    34                 var top = e.clientY - diffY;
    35 
    36                 if (left < 0) {
    37                     left = 0;
    38                 } else if (left <= getScroll().left) {
    39                     left = getScroll().left;
    40                 } else if (left > getInner().width + getScroll().left - _this.offsetWidth) {
    41                     left = getInner().width + getScroll().left - _this.offsetWidth;
    42                 }
    43 
    44                 if (top < 0) {
    45                     top = 0;
    46                 } else if (top <= getScroll().top) {
    47                     top = getScroll().top;
    48                 } else if (top > getInner().height + getScroll().top - _this.offsetHeight) {
    49                     top = getInner().height + getScroll().top - _this.offsetHeight;
    50                 }
    51 
    52                 _this.style.left = left + 'px';
    53                 _this.style.top = top + 'px';
    54 
    55                 if (typeof _this.setCapture != 'undefined') {
    56                     _this.setCapture();
    57                 }
    58             }
    59 
    60             function up() {
    61                 removeEvent(document, 'mousemove', move);
    62                 removeEvent(document, 'mouseup', up);
    63                 if (typeof _this.releaseCapture != 'undefined') {
    64                     _this.releaseCapture();
    65                 }
    66             }
    67         });
    68     }
    69     return this;
    70 });
  • 相关阅读:
    微博个人中心效果
    微博弹性按钮
    ios9 3dtouch 博客
    去掉导航栏阴影
    模态全屏模式,实现半透明效果
    剪切图片
    修改push动画的方向
    数据库链接池终于搞对了,直接从100ms到3ms
    如何在Java代码中去掉烦人的“!=null”
    面试官:请讲下接口具体怎么优化!
  • 原文地址:https://www.cnblogs.com/wanqiu/p/4456321.html
Copyright © 2011-2022 走看看