今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题。

按理应该是鼠标在哪,对象就跟着在哪的

百度了一下问题,http://blog.csdn.net/samed/article/details/50703704,在这个博文里面提到了this.scrollParent.scrollTop(),那么对这个位置进行断点调试。(当然最开始也尝试了一下注释了这个地方,并没什么用)

在这个处理过程中,我发现我得拖拽对象的scrollParent并不是想象中的直接上级,而是不知上了多少级的父级(代码中使用的是parents().filter(...)),但是又搞不太清楚为什么,因为代码有一万五左右行数,看是看不完的,都想放弃了,因为坑爹的是调试的时候,会一直跳到jquery.js中,大概是调试方法还没有很好掌握,没办法定住调控。(在这之中,也尝试了把一些样式去除掉看看,结果比较坑,去除掉一些样式的对象是可以正常使用的,那么结论肯定是和样式有关。)

不过因为在错误页面上,能看到,拖拽对象是top值少了一截,肯定是和parent.top有关,既然如此,那么就先仔细看看scrollParent到底是如何得到的。

jQuery UI API: http://www.runoob.com/jqueryui/api-scrollparent.html

API中介绍最近的可滚动祖先,那么是不是将直接父级指定为scrollParent就可以了,怎么让div内容超出后自动显示滚动条:只需要用到css的一个overflow:auto的属性就可以实现这效果了。

那么就是说在直接父级上加了样式

<td class="ui-sortable" style="overflow: auto;">...</td>

结果,拖拽正常。

jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题的更多相关文章

  1. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  4. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  5. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

  6. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

  7. js中call方法的使用介绍

    js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...

  8. js中split()方法得到的数组长度

    js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...

  9. 关于JS中的方法是否加括号的问题

    js中的方法什么时候加括号什么时候不加括号呢,我们有时候经常就搞不清楚,记住下面这几点就好理解了. 1.函数做参数时都不要加括号. function fun(a){ alert(a); } funct ...

随机推荐

  1. 解释Eclipse下Tomcat项目部署路径问题(.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps)

    配置eclipse的开发环境,配置jdk的安装路径和tomcat安装路径.在eclipse下建立Dynamic Web Project工程zhgy,在使用eclipse中new一个tomcat,通过启 ...

  2. python之类和对象

    对象(object)基本上可以看做数据(特性)以及由一系列可以存取.操作这些数据的方法所组成的集合. 类,可以看成种类,类型,从一组对象中提取到的相似部分.所有的对象都属于一个类,称为类的实例. 之前 ...

  3. JS自学笔记01

    JS自学笔记01 1.开发工具 webstorm 2.js(javascript) 是一门脚本.解释性.动态类型.基于对象的语言 含三个部分: ECMAScript标准–java基本语法 DOM(Do ...

  4. Mac 10.12下安装python3环境

    python3感觉用虚拟环境会比较好操作一些,也不用直接卸载python2. 一.基于brew快速安装 # 安装python3 brew install python3 # 安装pip(好像3自带pi ...

  5. pip的基本使用

    pip的基本使用 1.pip简介 pip 是一个现代的,通用的 Python 包管理工具.提供了对 Python 包的查找.下载.安装.卸载的功能 pip是官方推荐的安装和管理Python包的工具,用 ...

  6. MySQL匹配指定字符串的查询

    MySQL匹配指定字符串的查询 使用正则表达式查询时,正则表达式可以匹配字符串.当表中的记录包含这个字符串时,就可以将该记录查询出来.如果指定多个字符串时,需要用“|”符号隔开,只要匹配这些字符串中的 ...

  7. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

  8. AxWindowsMediaPlayer控件的使用

    首先要知道如何将控件添加到工具箱中,步骤如下: “工具箱”中单击右键,选择“选择项”菜单,打开“选择工具箱项”窗口,选择“COM组件”标签,在列表中找到并勾选“Windows Media Player ...

  9. 深入理解C++内存管理机制

    关于C++的内存处理,可分为三大块,分别是: (一)内存管理机制 (二)内存泄露处理 (三)内存回收机制 这篇文章将就(一)内存管理机制 进行深入探讨,如有错误欢迎大家指正. C++的内存管理也可细分 ...

  10. cookie 跨域解决方法

    1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...