使用 jQuery-UI Sortable 控制占位符高度

Posted

技术标签:

【中文标题】使用 jQuery-UI Sortable 控制占位符高度【英文标题】:Controlling Placeholder Height with jQuery-UI Sortable 【发布时间】:2012-08-18 04:21:22 【问题描述】:

我正在使用 jQuery-UI 可排序组件来拖动表格行。由于我的要求,我正在创建一个辅助元素来在拖动过程中保存多行。

我似乎有这个工作,但在当前拖动位置插入的空白空间只够单行。谁能看到为什么占位符没有我拖动的内容那么高?

我尝试在被拖动的父元素中设置style="height:auto",但这没有效果。

我在 jsFiddle 上发布了我的代码 http://jsfiddle.net/jCNcv/。如果您尝试将顶部的项目向下拖动,您可以看到拖动位置下方的空占位符仅够单行。

【问题讨论】:

看起来你正在尝试做某种形式的嵌套排序? ***.com/questions/3308672/… 不,不是嵌套的 sortables。只是具有逻辑父/子关系的可排序表行。它们被实现为常规行。 【参考方案1】:

占位符只有一行的高度,因为每个可排序项目只有一行。您可以在开始事件期间将占位符高度设置为辅助元素的高度。

start: function(e, ui )
     ui.placeholder.height(ui.helper.outerHeight());
,

更新了 jsfiddle http://jsfiddle.net/jCNcv/2/

【讨论】:

完美运行。我确实更改为使用 ui.helper.height() 而不是 outerHeight() 因为我希望占位符与拖动项的高度相同。

以上是关于使用 jQuery-UI Sortable 控制占位符高度的主要内容,如果未能解决你的问题,请参考以下文章

jquery-ui sortable - 在列表之间移动任务

jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项

Jquery-ui Sortable with js list maker from array 无法正常工作

React 导入 Jquery-Ui 可排序

jquery ui的sortable拖动克隆问题

jQuery-UI 可拖动和可排序