jQuery可排序占位符高度问题

93

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

jquery jquery-ui jquery-ui-sortable

— oshirowanen
source

您可以将其发布到jsFiddle吗？

— Satish

当您将项目拖放到另一个地方时，会发生这种情况吗？或加载页面后物品已经具有此高度？无论如何，请在此处查看：bugs.jqueryui.com/ticket/4482并尝试解决上述问题

— Mohammad

250

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

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

查看更新的测试用例

— 梅克沃尔
source

21

我个人不得不用ui.helper.outerHeight（）替换ui.item.height（），原因是边距和填充使元素的实际高度偏斜有些问题

— oshikryu 2013年

抱歉，但我认为它不能很好地工作，在此链接jsfiddle.net/t8gcZ/1中，占位符高度与商品高度相同（237px），但是在开始的时候，我们可以看到下面的商品向上移动了一个垃圾

— Makio

@Makio那是因为底部的填充。将padding-bottom添加到占位符可以解决此问题。jsfiddle.net/t8gcZ/136

— mekwall

15

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

— 达斯
source

2

我已经尝试过了，但是添加true或false对我的原始网站没有任何影响，这使它保持在10px高。在此jsfiddle中，它可以正确调整大小，但是将forceplaceholdersize设置为true或false没什么区别。jsfiddle.net/t8gcZ

— oshirowanen 2011年

@oshirowanen：您在哪个浏览器下对其进行测试？

— DarthJDG 2011年

@oshirowanen：可以在实际损坏的代码处发布链接吗？

— DarthJDG 2011年

2

那对我有用。我所要做的就是将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，2011年

@JPHellemons仅在高度不是动态的时才起作用

— Erdal

2

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

— 吉斯
source

浮动元素也是如此。如果列表元素是浮动的，则占位符也应浮动。

— 阿德里安·马里尼卡

2

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

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

— 埃兰切日·纳拉扬萨米
source

1

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

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

只是给那个样式一个高度。希望能奏效。

— MANATTWeb
source

2

但是那不会固定高度吗？我需要与内容保持一致。

— oshirowanen

1

在我的案例中，我发现了类似于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

— 用户名
source