Question

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

Answer 1

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

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

请参阅updated test case

Answer 2

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

Answer 3

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

Answer 4

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

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

只要给这种风格一个高度。希望有效。

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

Answer 6

而不是使用＆＃34; ui.item.height（）＆＃34;你可以使用＆＃34; ui.helper [0] .scrollHeight＆＃34;从外部容器拖动项目时的稳定结果。

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

jquery可排序的占位符高度问题

6 个答案: