jQuery UI Sortable/Draggable 导致窗口跳转

2023-12-29

在我的网页上,我有一个包含可排序 UL 的 div,每当我滚动到页面底部并拖动最后一个 LI 时,我的页面就会跳转,并且滚动条(在整个窗口上)会增长。

这是一个几乎解决了我的问题的 JSFiddle:www.jsfiddle.net/u5afykpf http://www.jsfiddle.net/u5afykpf。 要查看与我所发生的情况接近的内容,请滚动到底部并向下拖动最后一个元素。您将看到滚动条变大并移动。然而,在我的页面上,有更多的内容和高度,这会导致窗口发生变化,这是明显明显且不受欢迎的。如果你去jqueryui 可拖动演示 http://jqueryui.com/resources/demos/sortable/default.html,降低窗口高度并拖动最后一个元素,您会发现这种行为不会发生。

有没有人有 jQuery UI 可拖动和 CSS 建议的经验,他们可以给我阻止这种跳转发生?

我想做的一件事是给 UL 周围的 divposition: absolute但随后它就脱离了流程,布局变得完全混乱。


我很久以前就偶然发现了这个问题。尝试将以下参数添加到 .draggable 函数中

$('.selector').draggable({
    appendTo: 'body',
    containment: 'window',
    scroll: false,
    helper: 'clone'
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery UI Sortable/Draggable 导致窗口跳转 的相关文章

  • 如何在 Shiny 中动态渲染的 textInput 添加样式元素

    你好堆栈溢出 在我最近提出的问题中 我已经解决了一些与动态渲染 UI 元素相关的主要问题 并在一些了不起的人的帮助下动态创建了观察者 参见此处 动态渲染的 UI 如何在第二次运行时删除旧的反应变量 https stackoverflow c
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • jQuery:查找具有特定自定义属性的元素

    我只想找到具有特定自定义属性值的元素 例如 我想找一个div其具有属性data divNumber 6 var number 6 var myDiv data divNumber number 我尝试使用http api jquery co
  • 如何使用 jQuery 选择第一个块级父级?

    考虑以下标记 div h1 span span lorem ipsum span span h1 div 如何找到块级别的 span 3 的第一个父级 即具有display block 使用 jQuery 在这种情况下 那就是h1 1 3
  • CSS 边框样式 INSET 或 GROOVE 看起来与 IE9 FF4 或 Safari5 或 Chrome2 非常不同

    抱歉 我是个白痴 但是当我尝试获得某种凹槽效果或插入效果作为边框样式时 我从不同的浏览器中得到了一些非常非常大的视觉结果 使用时 border 5px groove A00 or border 5px inset A00 Firefox 3
  • Razor mvc3 + jquery + Url 操作 + 部分视图

    我有一个关于 jQuery Razor 的问题 我想使用 razor 和 Url Action 构建一个 javascript 变量 并且 html 属性将是输入的值 像这样 var d1 d1 val var d2 d2 val var
  • 对其中一个具有相同 tabindex 的焦点的所有元素应用相同的效果

    在我的上一篇文章中 我问了如何通过 css 选择器使不可聚焦的元素变得可聚焦 答案是使用tabindex 现在我希望 当具有选择器的元素获得焦点 单击 时 选择器选择的另一个元素也能获得效果 这可能听起来很奇怪 但我很久以前就可以不小心这样
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • Bootstrap 4 移动导航栏消失

    我刚刚从 Bootstrap 3 转换为 Bootstrap 4 但我的移动导航栏出现问题 使用切换按钮展开导航栏时 导航消失 我不明白为什么会发生这种情况 导航栏下方有一个大屏幕 但整个移动导航向上移动 如下面的 gif 所示 以下是导航
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • iphone jquery 移动闪烁问题

    我在 iPhone 上使用使用 jQuery mobile 开发的应用程序时遇到闪烁问题 我尝试了互联网上提供的几种解决方案 包括 CSS 更改 将过渡设置为 无 甚至在 jquerymobile js 中注释代码 但没有运气 我使用的 J
  • 返回视图作为 JSON 对象的一部分

    我有一个应用程序只加载一次完整视图 我这样做的原因并不重要 重要的是 其余内容只会以部分视图的形式返回 除了一些内容之外 我还有一些 JSON 对象 我想通过每个 AJAX 请求在服务器之间来回传递 有没有办法返回一个 JSON 对象 并将
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子

随机推荐