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

在拖动时,被拖动的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. 解决微服务网关Ocelot使用AddStoreOcelotConfigurationInConsul后请求404问题

    一个小插曲,最近研究 netcore 微服务网关,在使用AddStoreOcelotConfigurationInConsul将配置存到consul后,任何经过网关的请求都出现404,并且没有任何有用 ...

  2. DataSet转换成List<>

    方法一: //DataSet转换成List<ArticleInfo> public List<ArticleInfo> GetArticleList(DataSet ds) { ...

  3. 编码CODING

    摘自(复制)于海燕博客: http://www.cnblogs.com/haiyan123/p/7230533.html 1.内存和硬盘都是用来存储的. CPU:速度快 硬盘:永久保存 2.文本编辑器 ...

  4. Spring MVC+MySQL保存中文变成乱码

    环境:MySQL,Spring MVC3.2.0,jQuery v2.0.3,使用JdbcTemplate访问数据库,相当于全套Spring解决方案. 现象 直接使用表单POST,或者使用jQuery ...

  5. 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 ...

  6. java 中 enum 枚举的使用

    package test3; public final class Program {    public static void main(String[] args) {       // Sys ...

  7. 了解ORACLE培训OCA-OCP-OCM课程表

    了解ORACLE培训OCA-OCP-OCM课程表考试号: OCA    1Z0-007$125    Oracle Database 10g:SQL Fundamentals 本课程培养学生必要的SQ ...

  8. spring源码开发环境搭建

    下载spring源码 地址 https://github.com/spring-projects/spring-framework 可以下载release版本,也可以直接git clone当前开发版本 ...

  9. ruby:TypeError: 对象不支持此属性或方法(<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolink)

    我整理了一下 目前有三种方法,我是windows 7 64位, 答案中很多人是win8也成功了. 方法1:找到当前项目下 app/javascripts/applications.js  把里面的// ...

  10. Intellij-插件安装-安装CodeGenerator插件并且添加Builder模板

    Intellij IDEA 2018.1.2版本 CodeGenerator插件地址:https://github.com/lotabout/CodeGenerator/releases 步骤一:安装 ...