How do I move an item to an empty list between groups using jquery?

Question

I have multiple sortable list. It can able to do Reorder the groups, Reorder the items within the groups,Move the items between the groups.

But It cannot move the item from one group to other empty group.

Here I need to move any item from Group2 to Group1

Here is fiddle, I tried the below code

$(function(){
 $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group','.itemsList']
  });
});

Thanks in advance

Most likely because the other list has no visible height when it's empty, so you can't trigger the 'drop' on it. Try setting a `min-height` on the `ul` in CSS. Without seeing the actual HTML this is just a guess, though — Rory McCrossan, Jun 21 '18 at 13:32
@RoryMcCrossan Please check fiddle here http://jsfiddle.net/8fc9a27v/ — mymotherland, Jun 21 '18 at 14:21
Thanks for the example. The issue is as I suspected; due to no height taken up by the target element. I added an answer for you — Rory McCrossan, Jun 21 '18 at 15:01

score 3 · Accepted Answer · answered Jun 21 '18 at 15:00

The issue is because the .itemsList elements have no height when they are empty. As such it's not possible for a drag related event to be triggered on them.

One solution would be to set min-height on the elements so that they always take up space in the DOM, even when empty. Try this:

.itemsList {
  min-height: 10px;
}

$(function() {
  $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group', '.itemsList']
  });
});

li {
  background-color: #ffcb05;
  margin: 5px;
  padding: 5px;
  cursor: move;
}

div:not(.container) {
  background-color: #00274c;
  min-height: 30px;
  margin: 10px;
  padding: 10px;
  width: 200px;
  vertical-align: top;
  display: inline-block;
}

.group {
  min-height: 50px;
}

.itemsList {
  min-height: 10px;
  border: 1px dotted #bd9700;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="groupsList" class="groupsList">
  <li id="group1" class="group">Group 1
    <ul id="groupItems1" class="itemsList">

    </ul>
  </li>
  <li id="group2" class="group">Group 2
    <ul id="groupItems2" class="itemsList">
      <li id="item1-1" class="item">Item 1.1</li>
      <li id="item1-2" class="item">Item 1.2</li>
      <li id="item2-1" class="item">Item 2.1</li>
      <li id="item2-2" class="item">Item 2.2</li>
    </ul>
  </li>
  <li id="group3" class="group">Group 3
    <ul id="groupItems3" class="itemsList">
      <li id="item3-1" class="item">Item 3.1</li>
      <li id="item3-2" class="item">Item 3.2</li>
    </ul>
  </li>
</ul>

Note that I put a border around the .itemsList in the example above to make it clearer that the minimum height setting is in place.

How do I move an item to an empty list between groups using jquery?

1 Answers1