jQuery可排序占位符高度问题

Question

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

- oshirowanen

---

你能把它发布到 jsFiddle 上吗？ - Satish

这是在你将项目拖放到另一个位置时发生的吗？还是在加载页面后项目已经具有了这个高度？无论如何，请看这里：http://bugs.jqueryui.com/ticket/4482，并尝试按照提到的方法解决。 - Mohammad

Answer 1

我通常通过绑定一个回调函数来解决这个问题，该回调函数将占位符的高度设置为正在排序的项目的高度，并将其绑定到 start 事件。这是一种简单的解决方案，可以精细地控制您希望占位符如何显示。

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

请查看更新的测试用例

- mekwall

---

由于一些边距和填充会使元素的实际高度偏离，所以我个人不得不使用ui.helper.outerHeight()替换ui.item.height()。 - oshikryu

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Makio

@Makio 那是因为有padding-bottom。在占位符中添加padding-bottom可以解决这个问题。http://jsfiddle.net/t8gcZ/136/ - mekwall

Answer 2

你是否尝试设置forcePlaceholderSize:true属性？请参考jQuery UI Sortable文档页面。

- DarthJDG

---

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

@oshirowanen：您在哪个浏览器下测试它？ - DarthJDG

@oshirowanen：你能发一个链接到代码的地方，让我们看看哪里出了问题吗？ - DarthJDG

这对我有用。我所要做的就是更改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，你是正确的！ - JP Hellemons

@JPHellemons 这仅适用于高度不是动态的情况。 - Erdal G.

Answer 3

与其使用“ui.item.height()”，您可以使用“ui.helper[0].scrollHeight”来稳定结果，这样当从外部容器拖动项目时也能保持结果稳定。

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

- Elanchezhian Narayanasamy

Answer 4

您的元素是否具有 display: block？行内元素可能会导致占位符无法正确保持高度。例如，这个 jsFiddle 看起来有一个与您描述的问题类似的问题。将 .portlet 类添加 display: block 可以解决该问题。

- Gijs

---

同样适用于浮动元素。如果列表元素是浮动的，占位符也应该浮动。 - Adrian Marinica

Answer 5

在我的情况下，我找到了类似于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

- user3780666

Answer 6

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

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

只需为该样式设置一个高度。希望这能起作用。

- MANATTWeb

---

但是那不会固定高度吗？我需要高度与内容相同。 - oshirowanen