垂直排列父母，水平排列孩子

Question

sortable on part works fine - single are sorted horizontally.

Why parent is not sortable - to sort part vertically ?

  $('.parent').sortable({ items: ".part", containment: "parent", tolerance: "pointer", axis: "y", }); $('.part').sortable({ containment: "parent", tolerance: "pointer", axis: "x", }); 

 .parent{ background:silver; position:fixed; width:90%; left:5%; height:50px; overflow-y:scroll; } .part{ background:lightgreen; margin:5px; display:grid; grid-template-columns:50% 50%; } .single{ background:gold; cursor:cell; } 

 <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='parent'> <div class='part'> <div class='single'>lorem1</div> <div class='single'>ipsum1</div> </div> <div class='part'> <div class='single'>lorem2</div> <div class='single'>ipsum2</div> </div> </div> 

Answer 1

The primary issue is that there is no place to click on $(".part") without clicking on $(".single") . The target of the sort event is then the part and not the parent.

I would advise either a handle, or some amount of padding.

 $(function() { $('.parent').sortable({ items: "> .part", containment: "parent", tolerance: "pointer", axis: "y", }); $('.part').sortable({ containment: "parent", items: "> .single", tolerance: "pointer", axis: "x", }); }); 

 .parent { background: silver; position: fixed; width: 90%; left: 5%; height: 50px; overflow-y: scroll; } .part { background: lightgreen; margin: 5px; padding-left: 16px; display: grid; grid-template-columns: 50% 50%; } .single { background: gold; cursor: cell; } 

 <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='parent'> <div class='part'> <div class='single'>lorem1</div> <div class='single'>ipsum1</div> </div> <div class='part'> <div class='single'>lorem2</div> <div class='single'>ipsum2</div> </div> </div> 

By adding some padding, 16px worth on the left, I now have a defined space I can grab a Part without grabbing a single, and I can sort it as expected. items may not be needed, but it does clarify things when reviewing the code.

Hope that helps.