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. });

base库插件---拖动的更多相关文章

  1. base库插件---form

    $().extend('serialize', function () { for (var i = 0; i < this.elements.length; i ++) { var form ...

  2. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  3. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  4. highCharts入门-强大的图表库插件

    简介         Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...

  5. 解决jquery库和base库的冲突

    jquery库引用在base库之前,$的所有权就是base库的:而jquery库引用在base库之前后的话,$的所有权就是jquery库的.解决这种库之间的冲突可用以下方法解决: 情况一,jquery ...

  6. Chromium base库分割字符串SplitString

    前一段时间在工作过程中遇到一个场景需要将http response中的request header中的cookie字段取出并进行解析,但是手头没有解析cookie的工具类,同时cookie的表现就是个 ...

  7. 第一百三十八节,JavaScript,封装库--插件

    JavaScript,封装库--插件 库主要是用来封装一般JavaScript的常规操作代码,而拖拽这种特效代码属于功能性代码,并不是必须的,所以这种类型的代码,我们建议另外封装,在需要的时候作为插件 ...

  8. WPF 控件库——可拖动选项卡的TabControl

    WPF 控件库系列博文地址: WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的Sc ...

  9. 一种优雅的Golang的库插件注册加载机制

    一种优雅的Golang的库插件注册加载机制 你好,我是轩脉刃. 最近看到一个内部项目的插件加载机制,非常赞.当然这里说的插件并不是指的golang原生的可以在buildmode中加载指定so文件的那种 ...

随机推荐

  1. hdu_5773_The All-purpose Zero(LIS)

    题目链接:hdu_5773_The All-purpose Zero 题意: 给你一串数,让你求LIS,不过这里的0可以改变为任意数 题解: 官方题解讲的很清楚 1010 The All-purpos ...

  2. uci随笔

    UCI : Unified Configuration Interface1.基于nvram配置2.只需修改UCI配置文件3.配置文件存放在路径/etc/config/目录下4.可以通过uci命令或者 ...

  3. <marquee>,视频和音频的插入,正则表达式

    1.marquee 页面的自动滚动效果,不仅可以移动文字,也可以移动图片表格. <marquee></marquee>之间加内容即可. marquee的属性 1.滚动方向dir ...

  4. window.open弹出窗口调用controller

    前台图片调用js函数 <img src='${pageContext.request.contextPath}/FlatUI/img/link.png' id='report' alt='&qu ...

  5. AOP与动态代理有什么联系

    曾遇到“AOP与动态代理有什么联系”的问题,现把个人观点整理如下: 我觉得,动态代理是AOP的主要实现手段之一,AOP是动态代理的一种应用深化 AOP是一种思想,或者是方法论,类似OOP,是OOP的有 ...

  6. Modal视图弹出方式

    Modal方式弹出页面: 1.Modal方式弹出页面在iOS中有很广泛的应用,比如UIImagePickerController等,Modal方式主要有以下几个作用: 检查登陆信息,Modal出登陆页 ...

  7. IIS express 7.5 设置默认文档

    在C:\Users\[电脑用户名]\Documents\IISExpress\config 下面有个applicationhost.config文件,打开文件找到<system.webServe ...

  8. JS day01——window对象、执行顺序、线程模型

    1.window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. window ...

  9. TextureView+SurfaceTexture+OpenGL ES来播放视频(三)

    引自:http://www.jianshu.com/p/291ff6ddc164 做好的Demo截图 opengl-video 前言 讲了这么多,可能有人要问了,播放视频用个android封装的Vid ...

  10. OpenGL ES着色器语言之静态使用(static use)和预处理

    OpenGL ES着色器语言之静态使用(static use) 在OpenGL ES中有一个术语叫静态使用(static use),什么叫静态使用呢? 在写代码中,对于一个变量可能具有以下三种情况: ...