Problem with jquery serif sorting

Question

For some reason, the placeholder for my sortable items is about 10 pixels. All of my sortable items have different heights. How to change the height of each placeholder in accordance with the moved element?

Answer 1

I usually solve this by binding a callback that sets the height of the placeholder to the height of the element sorted by the start event. This is a simple solution that gives you subtle 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.

Answer 2

Have you tried setting the forcePlaceholderSize:true property? Read the jQuery UI Sortable page.

Answer 3

Are your elements display: block ? Inline elements can cause the placeholder to not maintain the height correctly. For example. this jsFiddle seems to be similar to the problem you described. Adding display: block to the .portlet class fixes it.

Answer 4

Instead of using "ui.item.height ()", you can use "ui.helper [0] .scrollHeight" for a stable result when dragging an item from an external container.

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

Answer 5

You can set a style for your placeholder as an option for sorting.

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

And just give it a height. Hope this works.

Answer 6

In my case, I found a solution similar to JP Hellemons , in which I force the height of the placeholder (with importance) to adjust, as well as adjust the visibility with the background to see the changes for myself (you can also style your placeholder as you want).

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