jquery可排序占位符高度问题

Question

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

Answer 1

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

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

请参阅更新的测试用例

Answer 2

您是否尝试过设置 forcePlaceholderSize:true 属性？请阅读 jQuery UI Sortable 文档页面。

Answer 3

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

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

Answer 4

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

Answer 5

就我而言，我找到了类似于 JP Hellemons 的解决方案，其中我强制占位符的高度（带有！重要）自定义，并设置背景可见性以查看我自己的更改（您也可以按照您想要的方式设置占位符的样式）。

这也适用于 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

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

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

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