jQuery UI =jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理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>
结果,拖拽正常。
转载于:https://www.cnblogs.com/danlis/p/7884508.html
jQuery UI =jquery-ui.js中sortable方法拖拽对象位置偏移问题相关推荐
- js中string字符串转换为JSON对象 - 方法大全(4种)
js中string字符串转换为JSON对象 - 方法大全(4种) jQuery插件支持的转换方式: 示例: //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对 ...
- Js中fetch方法
Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被 ...
- JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图 调用示意图 ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- JS中toFixed()方法的问题及解决方案
JS中toFixed()方法的问题及解决方案 参考文章: (1)JS中toFixed()方法的问题及解决方案 (2)https://www.cnblogs.com/gushen/archive/201 ...
- js中toFixed方法的两个坑
js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...
- created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- JS中数组(Array)、Json对象长度(length)获取方法
JS中数组(Array).Json对象长度(length)获取方法 1.数组 var array = []; var length = array.length; 2.JSON对象 1)方法1: va ...
- js中call()方法的用法
call: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一 ...
- 前端开发:JS中join()方法的使用总结
前言 在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对 对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的 ...
最新文章
- 鼠标跟随flash代码_FLASH如何制作密码锁功能(AS3)
- ros自己写避障算法_迷雾学术篇|视觉感知的无人机动态避障(下篇)
- sklearn自学指南(part20)--收缩和协方差估计
- python 首次登陆outlook 脚本_记Python“用户环境”的一次完美应用
- Windows搭建SonarQube_Mysql
- Intent各种flag解析。
- 【计算机网络】简单网络管理协议 SNMP
- htt:// ************不在以下 request 合法域名列表中,请参考文档:******************************
- Swift基础语法: 21 - Swift的可变形形参, 常量形参, 变量形参, In-Out形参
- Linux开发板移植minicom
- Amlogic机顶盒开发工具使用
- mysql最左前缀原则学习笔记,in也可以走索引
- 无盘服务器软阵列,论坛有史最详细的WIN软阵列教程
- cocos2d-JS 模块 anysdk 概述
- 2021招银网络提前批笔试编程题C++
- 哪里计算机考研只考一门课,计算机考研|专业课只考一门数据结构的院校有哪些...
- 量子力学科普书籍《见微知著》为什么值得读,看看目录就懂了
- 错误解决:hive报错Execution Error, return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask
- “水仙花数”与变种“水仙花数”
- 蓝桥杯国赛五一训练赛(1)