jquery可排序占位符高度问题

Posted 2023-02-24

【中文标题】jquery可排序占位符高度问题

【英文标题】：jquery sortable placeholder height problem

【发布时间】：2011-09-02 16:44:36

【问题描述】：

由于某种原因，我的可排序项目的占位符约为 10 像素。我所有的可分类项目都有不同的高度。如何更改每个占位符的高度以匹配正在移动的项目？

【问题讨论】：

你能把它发布到 jsFiddle 吗？

当您将项目拖放到另一个地方时会发生这种情况吗？或者加载页面后项目已经有这个高度？无论如何看看这里：bugs.jqueryui.com/ticket/4482 并尝试按照提到的解决方法

【参考方案1】：

我通常通过绑定一个回调来解决这个问题，该回调将占位符的高度设置为被排序到 start 事件的项目的高度。这是一个简单的解决方案，可让您对占位符的显示方式进行细粒度控制。

$( ".column" ).sortable(
    connectWith: ".column",
    start: function(e, ui)
        ui.placeholder.height(ui.item.height());
    
);

见updated test case

【讨论】：

我个人不得不将 ui.item.height() 替换为 ui.helper.outerHeight()，因为边距和填充会导致元素的实际高度倾斜

对不起，但我认为它效果不佳，在此链接jsfiddle.net/t8gcZ/1，占位符高度与项目高度（237px）相同，但在开始时，我们可以看到下面的项目向上移动一窝

@Makio 那是因为底部填充。将 padding-bottom 添加到占位符可以解决这个问题。 jsfiddle.net/t8gcZ/136

【参考方案2】：

您是否尝试过设置forcePlaceholderSize:true 属性？阅读 jQuery UI Sortable documentation page。

【讨论】：

我已经尝试过了，但是添加 true 或 false 对我的原始网站没有任何影响，它保持在 10px 高。在这个 jsfiddle 中，它正确调整大小，但 forceplaceholdersize 设置为 true 或 false 没有区别。 jsfiddle.net/t8gcZ

@oshirowanen：你在什么浏览器下测试它？

@oshirowanen：你能发布一个链接到它实际被破坏的代码吗？

这对我有用。我所要做的就是将 CSS .ui-sortable-placeholder border: 1px dotted black; visibility: visible !important; height: 50px !important; 更改为 .ui-sortable-placeholder border: 1px dotted black; visibility: visible !important; （所以删除高度）所以 @DarthJDG 你是对的！

@JPHellemons 仅在高度不是动态的情况下才有效

【参考方案3】：

除了使用“ui.item.height()”，您也可以使用“ui.helper[0].scrollHeight”从外部容器中拖动项目来稳定结果。

$( ".column" ).sortable(
    connectWith: ".column",
    start: function(e, ui)
        ui.placeholder.height(ui.helper[0].scrollHeight);
    
);

【参考方案4】：

你的元素是display: block 吗？内联元素可能会使占位符无法正确保持高度。例如。 this jsFiddle 似乎与您描述的问题类似。将display: block 添加到.portlet 类可以修复它。

【讨论】：

浮动元素也是如此。如果列表元素是浮动的，占位符也应该浮动。

【参考方案5】：

您可以将占位符的样式设置为可排序的选项。

$( "#sortable" ).sortable(
        placeholder: "ui-state-highlight"
);

然后给这种风格一个高度。希望有效。

【讨论】：

但这不会固定高度吗？我需要高度与内容相同。

【参考方案6】：

在我的情况下，我找到了类似于 JP Hellemons 的解决方案，其中我强制占位符的高度（使用 !important）自定义并设置背景可见性以查看自己的更改（你也可以用这种方式为你的占位符设置任何你想要的样式）。

这也适用于display: inline-block;

.ui-sortable-placeholder  
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
                         // in my case it was bottom -10px