Top method for setting up two drag-and-drop lists with one being sortable and the other automatically resorting upon dropping items?

Question

Top method for setting up two drag-and-drop lists with one being sortable and the other automatically resorting upon dropping items?

In a given situation I am facing, there is a long list of columns represented by <li> elements in two <ul> lists. On the left side are all available fields that can be selected by users, while on the right side users drag and drop desired fields from the left list to build an ordered list of columns for a dynamic report.

By using the JQueryUI Sortable() method, I have successfully created lists for dragging and dropping these column elements as needed. The functionality works flawlessly when moving content from the left list to the right, allowing users to order the columns themselves.

However, if a user decides not to include a previously added column and drags it back from the right list to the left, I would like the item to return to a specific pre-determined position within the left-side Sortable() list, rather than being placed below where it was dropped.

What is the best way to address this requirement? Should I utilize a JQueryUI Sortable() object for the container of columns on the left side and reorganize the data upon dropping, or is there a more suitable JQuery tool for this task? If opting for defining the left-side list as a Sortable() object, how should I adjust it to ensure proper reordering post-drop operation?

I have used this JSFiddle to set up the basic mechanics of the lists. While the right-side list functions as intended, I aim for the left side to maintain a sorted order based on a specified value for forced sorting. For instance, in this example, the left side should consistently sort based on the data-sort attribute defined in each <li>.

javascript jquery html css jquery-ui

Answer 1

Answer №1

Arrange all the dropped items in #left-list based on the specific data-sort attribute. Use the update callback function, which triggers with each update instead of using the stop function.

$("#left-side").sortable({
  connectWith: "#right-side",
  update: function(e, info) {
    $(this).children('li').sort(function(a, b) {
        return +a.dataset.sort - +b.dataset.sort;
    }).appendTo(this);
  }
});
$("#right-side").sortable({
  connectWith: "#left-side"
});
// code to assign appropriate data-sort attribute to each LI
$("#left-side, #right-side").find('li').attr('data-sort', function() {
  return $(this).index('body ul.ui-sortable li');
});

ul {
  border: 1px solid Black;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}
li {
  background-color: Azure;
  border-bottom: 1px dotted Gray
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h1>Click items to select them</h1>
<ul id="left-side">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul id="right-side">
  <li>Four</li>
  <li>Five
  </li>
  <li>Six</li>
</ul>

Answer 2

Arrange all the dropped items in #left-list based on the specific data-sort attribute. Use the update callback function, which triggers with each update instead of using the stop function.

$("#left-side").sortable({
  connectWith: "#right-side",
  update: function(e, info) {
    $(this).children('li').sort(function(a, b) {
        return +a.dataset.sort - +b.dataset.sort;
    }).appendTo(this);
  }
});
$("#right-side").sortable({
  connectWith: "#left-side"
});
// code to assign appropriate data-sort attribute to each LI
$("#left-side, #right-side").find('li').attr('data-sort', function() {
  return $(this).index('body ul.ui-sortable li');
});

ul {
  border: 1px solid Black;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}
li {
  background-color: Azure;
  border-bottom: 1px dotted Gray
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h1>Click items to select them</h1>
<ul id="left-side">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul id="right-side">
  <li>Four</li>
  <li>Five
  </li>
  <li>Six</li>
</ul>

Top method for setting up two drag-and-drop lists with one being sortable and the other automatically resorting upon dropping items?

Answer №1

Similar questions

Retrieving POST data from requests in Node.js

The smoothness of jQuery animations is not consistent

Spring load without CSS

What is the best way to dynamically pass props to the styles hook in Material UI?

Is there a way to use jQuery to animate scrolling on a mobile web browser?

Unable to update meta tags in index.html on GitHub Pages using create-react-app (CRA)

Nested ng-repeat for dynamic variable rendering

What could be causing the Ajax code to not activate when clicking or loading?

Utilizing Firebase Cloud Firestore: A guide to programmatically handling indexes

Running a Node.js server on a public IP address while utilizing socket.io

Getting the most out of the fastest-validator package: Implementing multiple patterns and custom messages

What could be causing the PAGE CSS to malfunction?

In Firefox, resizable child elements in a flex container cannot be resized

Using PHP code to pass a value to JavaScript

Identify and emphasize fields that contain identical, non-empty values

The HTML form label offers a choice between two alternatives

Strategies for managing unpredictable time series data visualization

Creating dynamic rows for Firebase data in React BootstrapTable can be accomplished by dynamically rendering each row

Finding a solution to this issue in Angular will consistently result in a false outcome

Calculate the duration in seconds using the console