Jquery 可排序占位符高度问题

由于某种原因,可排序项的占位符大约是10px。我所有可分类的物品都有不同的高度。如何更改每个占位符的高度以匹配正在移动的项目?

52178 次浏览

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.

Have you tried setting the forcePlaceholderSize:true property? Have a read on the jQuery UI Sortable documentation page.

Are your elements display: block ? Inline elements might make the placeholder not keep the height correctly. Eg. this jsFiddle seems to have a similar problem to the one you described. Adding display: block to the .portlet class fixes it.

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 start event. It's a simple solution that gives you fine-grained control over how you want your placeholder to be displayed.

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

See updated test case

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).

This works also with 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

Instead of using "ui.item.height()" you can use "ui.helper[0].scrollHeight" to stable result when drag an item from external container too.

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