Jquery ui draggable在chrome和ie7下的bug
当页面足够长,向下滚动一些之后,
在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距


鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多。
$("#abc").draggable({
drag: function (event, ui) {
if ($.browser.chrome || ($.browser.msie && $.browser.version == 7)) {
ui.position.top -= $(window).scrollTop();
}
}
});
加上drag事件回调,判断浏览器,减去响应的高度即可
Jquery ui draggable在chrome和ie7下的bug的更多相关文章
- JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- ie6和ie7下z-index bug的解决办法
一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...
- jQuery UI - draggable 中文API
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable(转)
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable参数中文详细说明
概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...
- jquery UI Draggable和Droppable 案例
<html> <head><title>draggable</title> <script type="text/javascript& ...
- jQuery UI Draggable + Sortable 结合使用
工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...
随机推荐
- 解决微服务网关Ocelot使用AddStoreOcelotConfigurationInConsul后请求404问题
一个小插曲,最近研究 netcore 微服务网关,在使用AddStoreOcelotConfigurationInConsul将配置存到consul后,任何经过网关的请求都出现404,并且没有任何有用 ...
- DataSet转换成List<>
方法一: //DataSet转换成List<ArticleInfo> public List<ArticleInfo> GetArticleList(DataSet ds) { ...
- 编码CODING
摘自(复制)于海燕博客: http://www.cnblogs.com/haiyan123/p/7230533.html 1.内存和硬盘都是用来存储的. CPU:速度快 硬盘:永久保存 2.文本编辑器 ...
- Spring MVC+MySQL保存中文变成乱码
环境:MySQL,Spring MVC3.2.0,jQuery v2.0.3,使用JdbcTemplate访问数据库,相当于全套Spring解决方案. 现象 直接使用表单POST,或者使用jQuery ...
- android平台一些常用代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- java 中 enum 枚举的使用
package test3; public final class Program { public static void main(String[] args) { // Sys ...
- 了解ORACLE培训OCA-OCP-OCM课程表
了解ORACLE培训OCA-OCP-OCM课程表考试号: OCA 1Z0-007$125 Oracle Database 10g:SQL Fundamentals 本课程培养学生必要的SQ ...
- spring源码开发环境搭建
下载spring源码 地址 https://github.com/spring-projects/spring-framework 可以下载release版本,也可以直接git clone当前开发版本 ...
- ruby:TypeError: 对象不支持此属性或方法(<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolink)
我整理了一下 目前有三种方法,我是windows 7 64位, 答案中很多人是win8也成功了. 方法1:找到当前项目下 app/javascripts/applications.js 把里面的// ...
- Intellij-插件安装-安装CodeGenerator插件并且添加Builder模板
Intellij IDEA 2018.1.2版本 CodeGenerator插件地址:https://github.com/lotabout/CodeGenerator/releases 步骤一:安装 ...