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

时间:2022-08-27 14:08:53

I'm using the jQuery-UI sortable component to drag table rows. Because of my requirements, I'm creating a helper element to hold multiple rows during the drag.

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

I seem to have this working, but the empty space inserted at the current drag position is only tall enough for a single row. Can anyone see why the placeholder isn't as tall as the content I'm dragging?

我似乎有这个工作,但在当前拖动位置插入的空白空间只有一行足够高。任何人都可以看到为什么占位符不像我拖动的内容那么高?

I tried setting style="height:auto" in the parent element being dragged but this has no effect.

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

I've posted my code on jsFiddle at http://jsfiddle.net/jCNcv/. If you try dragging the top item down, you can see that the empty placeholder under the drag position is only tall enough for a single row.

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

1 个解决方案

#1


59  

The placeholder is only the height of one row because each sortable item is only one row. You can set the placeholder height during the start event to the height of your helper element.

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

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

Updated jsfiddle http://jsfiddle.net/jCNcv/2/

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

#1


59  

The placeholder is only the height of one row because each sortable item is only one row. You can set the placeholder height during the start event to the height of your helper element.

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

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

Updated jsfiddle http://jsfiddle.net/jCNcv/2/

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