jQuery jquery可排序占位符高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6140680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery sortable placeholder height problem
提问by oshirowanen
For some reason the placeholder for my sortable items is about 10px. All my sortable items have different heights. How can I change the height of each placeholder to match the item being moved?
出于某种原因，我的可排序项目的占位符大约为 10 像素。我所有的可分类物品都有不同的高度。如何更改每个占位符的高度以匹配正在移动的项目？
回答by mekwall
I usually solve this by binding a callback that sets the height of the placeholder to the height of the item being sorted to the startevent. It's a simple solution that gives you fine-grained control over how you want your placeholder to be displayed.
我通常通过绑定一个回调来解决这个问题，该回调将占位符的高度设置为被排序到start事件的项目的高度。这是一个简单的解决方案，可让您对占位符的显示方式进行细粒度控制。
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
}
});
查看 更新的测试用例
回答by DarthJDG
Have you tried setting the forcePlaceholderSize:trueproperty? Have a read on the jQuery UI Sortable documentation page.
您是否尝试过设置forcePlaceholderSize:true属性？阅读 jQuery UI Sortable文档页面。
回答by Gijs
Are your elements display: block? Inline elements might make the placeholder not keep the height correctly. Eg. this jsFiddleseems to have a similar problem to the one you described. Adding display: blockto the .portletclass fixes it.
是你的元素display: block吗？内联元素可能会使占位符无法正确保持高度。例如。这个 jsFiddle似乎与您描述的问题类似。添加display: block到.portlet类修复它。
回答by Elanchezhian Narayanasamy
Instead of using "ui.item.height()" you can use "ui.helper[0].scrollHeight" to stable result when drag an item from external container too.
当从外部容器拖动项目时，您可以使用“ui.helper[0].scrollHeight”来稳定结果，而不是使用“ui.item.height()”。
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.helper[0].scrollHeight);
}
});
回答by user3780666
In my case I found solution similar to JP Hellemons, in which I'm forcing height of placeholder (with !important) to custom and also setting visibility with background to see changes for myself (also you can style this way your placeholder anyhow you want).
在我的情况下，我找到了类似于JP Hellemons 的解决方案，其中我强制占位符的高度（带有!important）自定义，并设置带有背景的可见性以查看自己的更改（您也可以以任何方式设置占位符的样式） ）。
This works also with display: inline-block;
这也适用于 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
回答by MANATTWeb
You can set a style for your placeholder as an option for your sortable.
您可以将占位符的样式设置为可排序的选项。
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
And just give that style a height. Hope that works.
只需给这种风格一个高度。希望有效。
