如何修复连接的可排序对象位置错误的可拖动助手(部分由浮动/相对定位的父元素引起)?

2024-05-13

Preface

我遇到一个问题,当使用放置在浮动、相对定位的父元素中的可拖动元素 + 可排序元素时,可拖动帮助器偏移不正确。浮动父元素是 Bootstrap 列,其中多个可排序列表放置在一列中,可拖动列表放置在另一列中。

Example

这是一个工作示例片段

$('.sortable').sortable({
  connectWith: '.sortable',
  revert: 600,
  forcePlaceholderSize: true,
  placeholder: 'ui-sortable-placeholder',
  tolerance: 'pointer'
}).disableSelection();

$('.draggable').draggable({
  connectToSortable: '.sortable',
  helper: 'clone',
  revert: true
}).disableSelection();
.sortable-container {
  display: inline-block;
  width: 100px;
  vertical-align: top;
}
.sortable {
  cursor: move;
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: top;
  border: 1px solid #000;
}
.ui-sortable-placeholder {
  background: #ff0000;
}
#draggables {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.draggable {
  margin: 4px;
  cursor: move;
  color: #fff;
  background: #5dd1ff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<div class='container-fluid'>
  <div class="row">
    <div class="col-xs-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-6">
      <p>foo</p>
      <p>bar</p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-6'>
      <div id='sortables'>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
      </div>
    </div>

    <div class='col-xs-6'>
      <ul id='draggables'>
        <li class='draggable'>draggable 1</li>
        <li class='draggable'>draggable 2</li>
        <li class='draggable'>draggable 3</li>
      </ul>
    </div>
  </div>
</div>

2015 年 11 月 16 日更新我修改了代码示例以更好地反映我的实际使用上下文,其中在保存可拖动/可排序的行上方还有更多行。

a 截屏视频 https://i.stack.imgur.com/EjLQf.gif,以及显示发生情况的静态图像

进一步解释

当将右侧列中的一个可拖动对象拖到左侧的一个可排序列表上,而不是放下它,而是将其进一步拖出可排序列表边界框时,助手的位置不正确,它会移动一个向左几百个像素,好像它错误地合并了某种偏移(看起来可能是原始的可拖动位置)。

有趣的是,当可拖动元素与可排序元素放置在同一父元素中时,不会发生这种情况,至少它不会水平移动,而是在将可拖动元素快速上/下或左/右移入/移出可排序列表时垂直移动。

水平移位在某种程度上与浮动/相对定位的父元素有关,禁用浮动或相对定位可以修复它。但是,我想保持原样,并找到另一个修复/解决方法。当不涉及浮动/相对定位时,也会发生垂直移动,所以我想这个问题还有更多问题。

2015 年 11 月 15 日更新- jQuery UI 更改

看起来 jQuery UI 1.11.4 稍微改变了行为,现在当您离开可排序的边界框时,它不会立即水平移动,但您必须首先在两个或多个可排序之间移动。除此之外,越野车的行为似乎没有改变。

2015 年 11 月 16 日更新 - appendTo option

最初我尝试使用appendTo一种解决方法,因为这样助手将被保留在列表之外,虽然这对于我的原始示例代码来说是正确的,但它不适用于更新的示例代码,其中更多的行放置在保存可拖动项的行上方/sortables,它们导致助手垂直移动。

Question

有谁知道有问题的水平偏移到底源于何处,以及如何在继续使用浮动/相对定位父元素的同时修复它?

那么垂直偏移呢,看到这种情况发生在jQuery UI 演示 http://jqueryui.com/draggable/#sortable也让我觉得这是一个与父元素的样式无关的错误?

2015 年 11 月 15 日更新- 找到垂直偏移问题

垂直偏移似乎与可拖动对象上应用的边距有关,如果没有它,它似乎工作正常。

我已将这两个问题报告为错误,但我仍在寻找可以自己应用的修复/解决方法,直到这可能会也可能不会在库中修复。

http://bugs.jqueryui.com/ticket/14822 http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806 http://bugs.jqueryui.com/ticket/14806


奇怪的是它似乎与jquery-ui 10.4。不同之处在于,在 10.4 中可拖动的助手保留在其原始 div 中,并克隆到可排序中但隐藏。因此计算更容易进行。

在 11.4 中,helper附加到它所拖动的可排序对象上,这使得精确的偏移计算难以遵循。您必须经常更改父偏移量,并跟踪它在哪个可排序上、在哪个可排序上、可排序的位置等等。显然那里有一个错误。

一种简单的解决方案是获得连接到可排序从 10.4 开始的插件。您必须检查是否有不需要的副作用,但很快它似乎就起作用了。您可以使用不同的名称,以便保留原始名称。像这样:

$.ui.plugin.add("draggable", "connectToSortable104", {
    // You take the whole connectToSortable plugin from  
    // here: https://code.jquery.com/ui/1.10.4/jquery-ui.js  
    // In 11.4 you'll need to add draggable parameter 
    // for example: to the event methods,
    // start: function(event, ui, draggable)
    ...

See http://jsfiddle.net/gsnojkbc/2/ http://jsfiddle.net/gsnojkbc/2/

EDIT:

我不认为额外的 div 是导致问题的原因,这实际上是一个错误连接到可排序在导致问题的 jquery 11.4 中工作。允许在可排序的并且仍然跟踪正确的偏移量,每次助手更改 div 时,您都需要重新调整一些数据。它的完成方式有两个缺陷:

第一个是有一个刷新偏移量常见的方法是 其他事件在可拖动的。例如,当您单击 可拖动。因此它尝试根据以下内容计算偏移量 点击。但是打电话的时候刷新偏移量从可排序事件中,它 弄乱了点击偏移。这可以通过改变来解决刷新偏移量方法,以便不考虑事件.pageX和 Y。 像这样:

$.ui.draggable.prototype._refreshOffsetsSortable = function(event, draggable){

        this.offset = {
                top: this.positionAbs.top - this.margins.top,
                left: this.positionAbs.left - this.margins.left,
                scroll: false,
                parent: this._getParentOffset(),
                relative: this._getRelativeOffset()
            };

            this.offset.click = draggable.offset.click;
    }

另一个问题的发生是因为你有很多可排序的。基本上 需要完成的另一个操作是更改父级 抵消。现在的做法是保存以前的 父母。通常情况下它可以工作,但如果你移动得太快,序列 使保存的父级成为sortable而不是原来的 父母。您可以通过在拖动开始时保存父级来解决此问题,其中 任何情况似乎都更有意义。像这样:

$.ui.plugin.add( "draggable", "connectToSortableFixed", {
    start: function( event, ui, draggable ) {
        var uiSortable = $.extend( {}, ui, {
            item: draggable.element
        });
        draggable._parent = this.parent();
...

看这里:http://jsfiddle.net/24a8q49j/1/ http://jsfiddle.net/24a8q49j/1/

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

如何修复连接的可排序对象位置错误的可拖动助手(部分由浮动/相对定位的父元素引起)? 的相关文章

  • 有 CSS 的替代品吗?

    是否有替代 CSS 的样式表格式化语言 或者 CSS 是当前用于执行样式表格式化类型操作的单一语言 我查看了维基百科上 CSS 的描述 http en wikipedia org wiki Cascading Style Sheets ht
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 无法选择或取消选择 jQuery UI 模态对话框中的复选框

    我使用 jQuery UI 的对话框来显示一些选项 每个选项都表示为复选框 现在 当我打开对话框并单击复选框时 没有任何反应 复选框没有被选中 我正在使用 jQuery UI 的最新版本 谁能告诉我出了什么问题吗 这是代码 div atta
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 如何在Yii框架中向Form添加类?

    我在 Yii 中有一个表单 我想向该表单添加一个类
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐