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

在拖动时,被拖动的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. HTML5+规范:Webview(管理应用窗口界面)

    一.知识点 Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作.通过plus.webview可获取应用界面管理对象. 1.方法 1.1.all: 获取所有Webview窗口 Array[ ...

  2. DataSet转换成List<>

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

  3. SQL学习笔记2

    2018.10.16:周二 --进阶   --别名 SELECT StuName,StuNum+','+StuClass+','+StuGender+','+StuPhone AS 信息 FROM S ...

  4. Flask系列03--Flask的路由 app.route中的参数, 动态参数路由

    Flask–路由 添加路由的两种方式 第一种 @app.route("/my_de") def detail() 第二种(了解即可) app.add_url_rule(" ...

  5. 从 falcon api 中获取数据

    import json import time import requests openfalcon = 'http://ip:port/api/v1' user = 'user' password ...

  6. JVM中的对象生命周期

    在JVM运行空间中,对象的整个生命周期大致可以分为七个阶段:创建阶段(Creation).应用阶段(Using).不可视阶段(Invisible).不可到达阶段( Unreachable).可收集阶段 ...

  7. node 无脑生成小程序二维码图

    RT 新建createwxaqrcode.js: const request = require('request') const fs = require('fs') // eg:生成购物车列表圆形 ...

  8. PHP之旅6 php的类与面向对象

    对于类与面向对象的问题其实刚开始不用非要弄懂原因,直接先这样用,用多了你就发现你会了.所以 学习面向对象就先去做.用的多了你就发现这个就是这样的. 对于类的理解,我自己的理解就是:有一个叫做类的东西里 ...

  9. CAN总线协议 学习笔记

    1.CAN总线网络 CAN总线网络主要挂在CAN_H和CAN_L,各个节点通过这两条线实现信号的串行差分传输,为了避免信号的反射和干扰,还需要在CAN_H和CAN_L之间接上120欧姆的终端电阻,但是 ...

  10. day 46 Django 学习3 数据库单表操作以及反向解析

    前情提要: Django 已经学了不少了, 今天学习链接数据库的操作.以及相关的反向解析等 一:反向解析 1:反向解析模板层 跳转时设定url会随着前面的路由改变而改变         2:反向解析之 ...