当页面足够长,向下滚动一些之后,

在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距

鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多。

解决方法参考:http://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-place-when-scrolled-down-page

 

$("#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的更多相关文章

  1. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  2. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  3. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  4. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  5. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  6. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  7. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  8. jquery UI Draggable和Droppable 案例

    <html> <head><title>draggable</title> <script type="text/javascript& ...

  9. jQuery UI Draggable + Sortable 结合使用

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...

随机推荐

  1. netcore问题总结

    1. webclient在在netcore异步文件下载的时候,下载进度为空,只有最后下载完了,进度才会是100%,但是在netframework中就没有这个问题,异步文件下载进度会正常提醒. 2. n ...

  2. BitAdminCore框架应用篇:(一)使用Cookiecutter创建应用项目

      框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookiecutter-bitadmin-core 一.简介 1.Coo ...

  3. Restframework 分页器 Pagnation 组件实例-5

    分页逻辑 from rest_framework.pagination import PageNumberPagination class BookView(APIView): # authentic ...

  4. CEPH 创建 RPM 安装包

    1.安装依赖环境 yum install gcc make python-devel openssl-devel graphviz autoconf automake rpm-build redhat ...

  5. 字符串写入txt文件

    将字符串写入C盘txt文件里 File.AppendAllText(@"C:\" + DateTime.Now.ToString("HHmmss") + &qu ...

  6. python 利用from ... import * 的特性实现文件的覆盖

    在Python中, 如果使用 from module import * 这样方式进行导包, 就会把module模块里所有的变量导入进来, 并且可以直接使用(其实导包时 module 模块已经被从头到尾 ...

  7. centos6.2 下安装并配置hadoop1.0.4(32位安装)

      一,环境准备 1.  集群内所有电脑需要设置防火墙,下面以master为例说明: 切换到root用户下,执行setup指令:

  8. echart 遇到的点

    1,图表随着外部container变化而变化: window.onresize = myChart.resize (拿着resize在api文档中搜就看到了)

  9. Centos7安装Chacha20加密算法 (验证成功)

    Centos7安装Chacha20加密算法 (验证成功) 有些程序会使用Chacha20加密算法,如果Centos7系统报错Exception: libsodium not found,则缺乏M2Cr ...

  10. jmeter报错

    1.检测服务性能是报超时时问题 解决:因为服务器限制只能域名访问不能用ip+端口访问,但是jmter使用的是IP+端口访问 如图: 所以需要服务器放开这个端口,改成可以使用这个IP+端口访问