How to make it to move div befor selected div

[fumeeptc]

Hello!

In this fiddle i have https://jsfiddle.net/r8p3dcz7/ there is awesome script that moves divs around changing its location.

The error for me is that if you move for example A6 before A1 then in first colon there are 3 divs in second there are 2 divs and in last one there are one div.

My question is how to make that A6 moves A1 to the right and A3 to next row. … And so on.

It is hard for me to tell what i have tried. … Nothing was close (i m bad at this)

Thanks in advance!!!

[PaulOB]

It looks to me as though you have floated three pairs of 2 vertical divs each. Wouldn’t it be better to have one column that is 3 items wide.

e.g. remove all the inner columns:

<div class="column">

  <div class="portlet">
    <div class="portlet-header">A1</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">A2</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">A3</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">A4</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">A5</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">A6</div>
    <div class="portlet-content">Lorem ipsum dolor, consectetuer elit</div>
  </div>
</div>

Then float each block:

.column {width:600px}

.portlet {
  float: left;
  width: 170px;
  margin: 0 1em 1em 0;
  padding: 0.3em;
}

As you can see from the pic the a6 is now to the left of the a1 div.

However remember that if floats are not exactly the same height they will snag so you would be better off using flex or inline-block instead,

Of course if this is a script question instead then it needs to be posted in the JS forum.

[fumeeptc]

@PaulOB

.column {width:600px} .portlet { float: left; width: 170px; margin: 0 1em 1em 0; padding: 0.3em; }

This does it! But i needed it to be in grid. Anyway i managed to fix it! Thanks for tips

[fumeeptc]

I found it too late but this could be a good example for coders in future: http://www.pureexample.com/jquery-ui/sortable-placeholder.html also
https://jqueryui.com/sortable/#display-grid

How did i miss all that on first search

[fumeeptc]

I having another issue maybe you can help here! https://jsfiddle.net/d15ph03L/
to see visual bug try to move order: 5 to order: 6 you will see that it makes big space between rows and makes order: 7 stick under place holder. What could be wrong there?

[PaulOB]

It looks like the float it snagging because the portlet placeholder does not have the same margin bottom as the original element.

e.g.

  .portlet-placeholder {
    border: 1px dotted black;
    //margin: 0px 15px 15px 15px;
    height: 70px;
	border-radius: 3px;
  margin-bottom:30px
  }

[fumeeptc]

What a shame so easy fix! Thanks allot!