Jquery UI Sortable width is incorrect when dragging an element with a inline width percentage

0
votes

I am using Jquery UI sortable to sort a group of divs whose percentage widths are not known before run time. I am therefore setting them via an inline style.

The issue is when the sortable div is dragged it's width is not calculated and set accordingly so it stretches to a percentage of the wrong element.

Is this a bug in jquery UI or am I missing something?

Here is some simplified html 

<div id="Container">

<div id="mainColumn">
    <div style="width:80%;" class="sortableItem">
        Item 1 needs 80% width
    </div>
     <div style="width:100%;" class="sortableItem">
        Item 2 needs 100% width
    </div>

     <div style="width:50%;" class="sortableItem">
        Item 3 needs 50% width
    </div>
</div>

Here is a fiddle that shows the issue https://jsfiddle.net/qkunja68/ When dragging the 3 items they do not keep their width.

1
jqueryjquery-uijquery-ui-sortable

1 Answers

0
votes

You can set the forceHelperSize property of the sortable object to true when you call sortable()

I changed the fiddle JavaScript code to this to get it to work 

$('#mainColumn').sortable({
 items:'.sortableItem',
  forceHelperSize: true
 });