拖动元素时滚动 div 而不移动鼠标

2023-12-27

我开发了一个代码,其中包括一个表格,其中所有单元格都是可删除的。表格容器是具有固定高度和滚动条的 div。

我想将一个元素(在我的示例中为黄色方块)拖到表格底部的最后一个表格单元格中。一切正常,但要在拖动元素时激活 div 容器的滚动条,我必须一直移动鼠标.

当我的元素在 div 容器底部附近拖动而不移动鼠标时,是否有可能自动向下滚动?

这是我的例子:http://jsbin.com/upunek/19/edit http://jsbin.com/upunek/19/edit

提前致谢


今天早上我就明白了

我创建setInterval函数时拖动事件位置位于边框 70px 处

这是我制作的小提琴:http://jsfiddle.net/pPn3v/22/ http://jsfiddle.net/pPn3v/22/

var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();

var red = $('#red');

var intRightHandler = null;
var intLeftHandler = null;
var intTopHandler= null;
var intBottomHandler= null;
var distance = 70;
var timer = 100;
var step = 10;


function clearInetervals()
{
    clearInterval(intRightHandler);
    clearInterval(intLeftHandler);
    clearInterval(intTopHandler);
    clearInterval(intBottomHandler);    
}

red.draggable({
    start : function(){},
    stop: function(){clearInetervals(); },    
    drag : function(e){
        var isMoving = false;        
        //Left
        if((e.pageX - offset.left) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intLeftHandler= setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() - step)
            },timer);
            console.log('left')
        }

        //Right
        if(e.pageX >= (offsetWidth - distance))
        {
            isMoving = true;
            clearInetervals();            
            intRightHandler = setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() + step)
            },timer);
            console.log('right')
        }

        //Top
        if((e.pageY - offset.top) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intTopHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() - step)
            },timer);
            console.log('top')
        }                          

        //Bottom
        if(e.pageY >= (offsetHeight - distance))
        {
            isMoving = true;
            clearInetervals();            
            intBottomHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() + step)
            },timer);
            console.log('bottom')
        }     

        //No events
        if(!isMoving)
           clearInetervals();  
    }
});

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

拖动元素时滚动 div 而不移动鼠标 的相关文章

  • jQuery Draggable:可拖动框越过容器 - bug?

    Try this http jsfiddle net QhVNr code HTML div class draggable container div class draggable div class exp div div div C
  • 使用 jquery UI 调整大小的分屏 div

    我心中有一个设计 涉及 html 中的拆分面板视图 类似于 winforms 拆分面板 我一直在尝试jQuery UI 可调整大小 http jqueryui com demos resizable我喜欢这个功能 我只是似乎无法协调两者的大
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • 获取鼠标在滚动条上的位置

    当我向下滚动或向上滚动时如何获取鼠标位置 我试过这个 document mousemove function event captureMousePosition event scroll function event xMousePos
  • 如何使用鼠标单击选择多个项目?

    This is the default jQueryUI display as a Grid Layouts demo here http jqueryui com demos selectable display grid I can s
  • 无法将 QList 分配给 QString

    我遇到这个错误 Unable to assign QList
  • 是否可以将外部数据拖放到 jstree 中?

    我正在开发一个需要构建分层导航菜单的项目 jstree https www jstree com看起来很适合这个 该树将被保存到数据库中 我计划使用 CakePHP树的行为 https book cakephp org 2 0 en cor
  • JQuery UI 1.10.0 自动完成 renderItem 问题

    我尝试了有关将 autocomplete 重命名为 ui autocomplete 的解决方案 使用 JQueryUI 1 10 0 JQuery 1 8 3 但仍然收到错误 类型错误 autocomplete data 未定义 data
  • 有没有好的、轻量级的、具有良好 UI 的网络日期/时间选择器?

    几个愿望 如果它是基于 jQuery 的 那就最好了 如果它专注于简单的用户界面而不是养眼的东西 更好的 如果它既是日期又是时间选择器 好的 我应该提到的是 我已经查看了使用 Google 可以找到的大多数可用选项 问题不在于官方 jQue
  • 恢复 webview 滚动位置?

    我想要拯救国家 of my webView以其页面滚动位置当用户离开应用程序时并在用户再次打开应用程序时恢复它们 这样 用户可以继续阅读恢复的网页视图内容 向下滚动到恢复的位置 以下是我正在使用的方法 Override protected
  • QML:即使拖动属性处于活动状态,也不会调用 onDragStarted / finish

    在下面的例子中我希望onDragStarted onDragFinished当拖动一个矩形时调用 然而仅drag onActiveChanged 鼠标区域 和Drag onActiveChanged 矩形的被称为 设置时我得到了预期的输出D
  • 如何动态选择 jQuery ui 选择菜单中的选项?

    将菜单从常规选择更改为 jQuery 选择菜单后 我无法再以编程方式选择其中的选项 有没有办法做到这一点 选择的代码是 假设ListId是列表的实际Id ListId val value 该插件的激活方式如下 ListId selectme
  • 如何判断用户是否已经滚动到UITableView的底部?

    如何确定用户是否已滚动到 UITableView 的最后一个单元格 底部 UITableView继承自UIScrollView 滚动视图暴露了一个contentOffset财产 文件here http developer apple com
  • 是否可以使用 jQuery UI 限制 selectmenu 小部件的高度?

    我一直在尝试通过设置来做到这一点size来源的属性select元素 但它被忽略了 小部件似乎没有任何高度设置选项 是否可以 该小部件当前在隐藏了溢出的 div 对话框内工作 因此下拉列表 始终为 26 个项目 会从 div 中消失 一些CS
  • 无法选择或取消选择 jQuery UI 模态对话框中的复选框

    我使用 jQuery UI 的对话框来显示一些选项 每个选项都表示为复选框 现在 当我打开对话框并单击复选框时 没有任何反应 复选框没有被选中 我正在使用 jQuery UI 的最新版本 谁能告诉我出了什么问题吗 这是代码 div atta
  • 处理 TShellListView 后代中的文件放置

    我正在尝试创建 TShellListView 的后代 它接受从 Windows 资源管理器中删除的文件 我想在组件定义中处理拖 放操作 而不必在任何使用该组件的应用程序中实现它 我找到了接受从 Windows 资源管理器中拖放的文件的示例
  • defaultDate 选项与 setDate 方法之间的差异

    我正在尝试使用jQueryUI DatePicker 我必须了解的主要事情之一是在页面加载时设置日期的方式 经过一些研究后 我发现有两种不同的方法可以做到这一点 using defaultDate option using setDate
  • 覆盖层不与 UITableView 一起滚动 - iOS

    我有一个 UITableView 类 它使用以下方法在转到下一个屏幕时调用加载覆盖 问题是这个加载屏幕不随列表滚动 所以如果你滚动一点并单击某些东西 加载屏幕不会显示 因为它位于顶部 如何让加载屏幕始终保持在 UITableView 的顶部
  • jquery ui 自动完成与委托

    我已经根据文档设置了 JQuery UI 自动完成功能 它适用于渲染到页面的 class tag item 的任何输入 然而 用户可以通过 JS 将输入添加到 dom 中 因此我需要一种使用委托将自动完成绑定到新的动态创建的输入的方法 我不
  • Kendo Ui 像 Windows 桌面一样可拖动

    我需要模拟桌面图标拖放 我这样做 draggable kendoDraggable container desktop hint function return draggable clone dragend function e cons

随机推荐

  • 紧凑框架语音识别API或库

    到目前为止 我的研究告诉我 没有免费的语音识别库 这仍然是这种情况吗 因为我发现的所有帖子都是几年前的 如果我想让我的 WinMobile C 应用程序能够 是否有示例应用程序或任何我可以开始的东西 从输入中识别语音 看一下http www
  • 获取curl php中最后一个重定向的url

    大家好 我知道这是 StackOverFlow 上一个非常常见的话题 我已经花了整整一周的时间来寻找它 我有一个网址 abc com default asp strSearch 19875379 这进一步重定向到此网址 abc com de
  • 在 AngularJS 中观察外部变量?

    我已经为 Chrome 应用程序中的串行通信编写了一个小型 JS 库 并且它本身运行良好 然而 我们在与 Angular 集成时遇到了一个问题 我没有办法从内部观察控制器外部串行对象的属性 而且我也无法找到解决方法 理想情况下 有一个计算成
  • 使用 plist 创建测验的随机整数

    我想让用户单击一个按钮以 a b c 的形式生成十个问题测验 其中 a 和 b 的值从 10 到 10 并随机分配给十个问题 此外 问题应该在加法和减法之间随机切换 如何正确填充 plist 文件 我该如何使用arc4random用随机整数
  • 如何使用 libgit2sharp 获取文件的先前版本

    我正在尝试使用libgit2sharp获取文件的先前版本 我希望工作目录保持原样 至少恢复到以前的状态 我最初的方法是尝试存储 签出我想要的文件的路径 将其保存到字符串变量 然后存储弹出 有没有办法隐藏流行音乐 我不容易找到它 这是我到目前
  • 以主题作为文件名保存邮件

    大家早上好 我希望有人可以帮助我编写一段代码 我希望将选定的电子邮件保存到特定目录 并使用电子邮件的名称 当然还有 msg 文件 这就是我今天所拥有的 但它不起作用 它保存一个文件 但名称只有前 2 个字符 看起来在分号文件名后出错 例如
  • xkcd:外部性

    所以2013年4月1日 xkcd外部性 http xkcd com 1193 网络漫画以 Skein 1024 1024 哈希破解为特色contest http almamater xkcd com 我假设这一定只是一种暴力行为 其中随机字
  • OxyPlot:如何隐藏左侧和顶部轴线

    我在 Xamarin iOS 项目中使用 Oxyplot 来绘制条形图 这就是我的情节目前的样子 这里我需要隐藏右轴和顶轴 我试过 model Axes Add new LinearAxis Position AxisPosition Ri
  • “无法识别的选择器发送到实例”UINavigationController

    我的 Xcode 应用程序收到以下异常错误消息 UINavigationController setDeals unrecognized selector sent to instance 0x8338d40 在以下上下文中抛出异常prep
  • 在发布模式下,代码行为不符合预期

    以下代码在调试模式和发布模式下产生不同的结果 使用 Visual Studio 2008 int tmain int argc TCHAR argv for int i 0 i lt 17 i int result i 16 if resu
  • Dojo:如何使用自己的onMove事件(覆盖)

    在文档中据说 onMove mover leftTop e 在每次移动通知期间调用 实际上应该移动节点 可以被覆盖 但没有示例如何覆盖它 onMove 有人可以抛出几行代码来展示它是如何工作的吗 Thanks 您没有指出哪个 dojo Ja
  • 如今何时使用定点

    对于密集的数字运算 我正在考虑使用定点而不是浮点 当然 定点类型的大小有多少字节 它将在什么 CPU 上运行 如果我可以使用 对于英特尔 MMX 或 SSE 或任何新出现的东西 这都很重要 我想知道现在浮点运行速度比以往任何时候都快 是否值
  • Android MediaCodec:编码失败,因为视频轨道没有同步帧

    我计划将一个视频文件转换为另一个具有不同比特率 fps 等的视频文件 基本上我遵循中的示例http bigflake com mediacodec http bigflake com mediacodec 但是 日志显示视频轨道没有同步帧的
  • Heroku:“https://git.heroku.com”的用户名:git

    我正在尝试检查 heroku 上的 git 远程 heroku auth logout Local credentials cleared heroku auth login Enter your Heroku credentials Em
  • 如何查找特定 Subversion 用户所做的修订?

    使用命令行 我想查看特定用户所做的所有更改集 这可能吗 我查看了文档svn log但不知道如何做到这一点 我不知道有什么方法可以使用纯 Subversion 来做到这一点 但你可以做到with sed http svn haxx se us
  • PHP - preg_replace - 文本链接作为可点击链接

    我使用此 preg replace 将文本 url 更改为可在脚本中单击 将文本链接替换为带有 preg replace 的链接 https stackoverflow com questions 13105960 replacing te
  • jQuery element.data() 语法。我怎么知道`$(this)`是什么?

    我有以下 jQuery 变量 var confirmbox div div data defaultText This action cannot be reversed Are you sure you wish to do this d
  • intellij idea中设置tomcat的问题

    我正在尝试使用 intellij idea 创建一个简单的测试 Restful Web 服务 我正在关注这个教程 https medium com jamsesso starting out with jersey apache tomca
  • 当您克隆 Backbone.Collection 时,模型引用是否完好无损?

    我正在 clone ing 一个集合 以便我可以在其上使用拼接循环而不干扰原始集合 克隆阵列中的模型是原件还是副本 我需要的是包含原始模型的数组的副本 感谢您提供任何信息 您将获得与包装在相同类型的新集合中的源集合相同的模型 这是colle
  • 拖动元素时滚动 div 而不移动鼠标

    我开发了一个代码 其中包括一个表格 其中所有单元格都是可删除的 表格容器是具有固定高度和滚动条的 div 我想将一个元素 在我的示例中为黄色方块 拖到表格底部的最后一个表格单元格中 一切正常 但要在拖动元素时激活 div 容器的滚动条 我必