how to sort and move elements inside a grid

Question

el should be movable:
up and down - inside the parent - so columns should be sortable
and left-right - from one column to another
Any help

 $("#cola, #colb, #colc, #cold").sortable({ containment: "parent" }); $("#cola, #colb, #colc, #cold").droppable(); $('.el').draggable({ });

 .grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; width:50%; }.col{ height:100vh; overflow-y:scroll; }.el{ line-height:25px; text-align:center; cursor:pointer; margin:14px 0; background:gold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class='grid'> <div class='col' id='cola'> <div class='el'>A</div> <div class='el'>A</div> <div class='el'>A</div> </div> <div class='col' id='colb'> <div class='el'>B</div> <div class='el'>B</div> <div class='el'>B</div> </div> <div class='col' id='colc'> <div class='el'>C</div> <div class='el'>C</div> <div class='el'>C</div> </div> <div class='col' id='cold'> <div class='el'>D</div> <div class='el'>D</div> <div class='el'>D</div> </div> </div>

Answer 1

I think you're over complicating it. Here is a basic sortable, you will want to use items and connectWith options.

 $(".col").sortable({ containment: ".grid", items: "> div.el", connectWith: ".col" });

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 50%; }.col { height: 100vh; overflow-y: scroll; }.el { line-height: 25px; text-align: center; cursor: pointer; margin: 14px 0; background: gold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class='grid'> <div class='col' id='cola'> <div class='el'>A-1</div> <div class='el'>A-2</div> <div class='el'>A-3</div> </div> <div class='col' id='colb'> <div class='el'>B-1</div> <div class='el'>B-2</div> <div class='el'>B-3</div> </div> <div class='col' id='colc'> <div class='el'>C-1</div> <div class='el'>C-2</div> <div class='el'>C-3</div> </div> <div class='col' id='cold'> <div class='el'>D-1</div> <div class='el'>D-2</div> <div class='el'>D-3</div> </div> </div>