CODEWITHSUNDEEP
javascriptjquery-ui
user7461846
user7461846

Reputation:

sort parents vertically and child horizontally

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>

Upvotes: 0

Views: 24

Answers (1)

Twisty
Twisty

Reputation: 30893

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.

Upvotes: 1

Related Questions