CODEWITHSUNDEEP
jqueryhtmlcss
tharid
tharid

Reputation: 35

Move li items on click between lists

I'd like to do the following:

I have three lists, list A, list B, list C.

I want to move items ON CLICK out of list A into list B and items out of list C into list B, so A and C are left and right, and B is the "container list" for items from list A and C.

List B, the container list, should be empty at the beginning.

Edit: This should work both ways if possible, so if I click an item that I put into list B that should be sorted back into list A and C.

Here is a very simple example of how it looks like right now: https://jsfiddle.net/3ds06kf0/2/

#listA,
#listB,
#listC {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}
<ul id="listA" class="connectedSortable">List A
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

<ul id="listB" class="connectedSortable">List B
  <!-- THIS IS EMPTY AT THE BEGINNING -->
</ul>

<ul id="listC" class="connectedSortable">List C
  <li class="ui-state-highlight">Item 6</li>
  <li class="ui-state-highlight">Item 7</li>
  <li class="ui-state-highlight">Item 8</li>
  <li class="ui-state-highlight">Item 9</li>
  <li class="ui-state-highlight">Item 10</li>
</ul>

I have found some complex solutions including Dragula JS and the such, but I believe that there are simpler solutions to this using basic jquery, I just can't get my head around it :(

Upvotes: 0

Views: 433

Answers (2)

Nouman Saleem
Nouman Saleem

Reputation: 375

Use this jquery to your code.. it will definitely solve you problem

$('#listA li').click(function(){
var elem=$(this).text();
$("#listB").append("<li class='ui-state-highlight'>" +elem+ "</li>");

});

$('#listC li').click(function(){
var ele=$(this).text();
$("#listB").append("<li class='ui-state-highlight'>" +ele+ "</li>");

});

I am not i can show you or not.. But here is the jsfiddle link https://jsfiddle.net/3ds06kf0/66/

Upvotes: 0

Jari Rengeling
Jari Rengeling

Reputation: 326

You can move items with appendTo

Try this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#listA").on('click', 'li', function () {
    $(this).appendTo('#listB');
});

$("#listC").on('click', 'li', function () {
    $(this).appendTo('#listB');
});

Upvotes: 1

Related Questions