Build numerous customizable grids using jQuery UI for sorting purposes

I am using jQuery version 1.9.1 along with jQuery UI 1.9.2 for my applications that involve multiple lists, each consisting of several rows. While the official demo showcases how to work with one list successfully, I encountered an issue when trying to use two lists. Despite configuring the sortable feature for both lists in my test page, items from the first list were unable to be moved to the second list. Any insights or solutions are greatly appreciated. Thank you.

Here is a snippet of my JavaScript code:

$(function() {
    $('#sort1, #sort2').sortable().disableSelection();
});

In addition, when implementing connectWith: '.sort', the user interface incorrectly defines placement positions. Furthermore, including float: left in the list styling restricts movement between the lists entirely.

javascriptjquerycssjquery-ui

Answer №1

To ensure proper functionality, make sure to specify the connectWith option in the plugin settings. Check out the updated version of your code on JSFiddle: http://jsfiddle.net/fjjqM/1/

If you notice any odd behavior during movement, refer to the official documentation for more detailed explanations: http://jqueryui.com/sortable/#connect-lists

Answer №2

Check out this helpful post that addresses a similar issue:

JQuery sortable breaks when using connectWith on sortable grids

nick_w recommends making a code replacement in jquery.ui.sortable.js at line 734

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else { ...

replace with

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) { ...

Edit: I tweaked your jsfiddle to be compatible with an older version of jQuery UI and now it works perfectly. Hopefully, this resolves your issue.

http://jsfiddle.net/fjjqM/6/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning text inputs inline within a Bootstrap form for a cleaner and organized

I am currently working on designing a form using Bootstrap, and I have a specific requirement where the first name and last name fields need to be displayed inline while the rest of the form remains unchanged. Although I have managed to make the inline fu ...

htmlcsstwitter-bootstrap

Connect to a particular section of the webpage with additional top spacing

The navigation on this page is not transparent. Whenever I link to a specific part of the page, some text becomes hidden behind the navigation bar. This is illustrated in the image below: https://i.sstatic.net/h0ExX.png What I desire is a navigation bar l ...

htmlcss

Issues with Leaflet's MaxBounds functionality - boundary constraints not functioning as expected

I recently experimented with Leafletjs maxBounds by testing it out using code from Mapbox's example. For my complete code, you can also view it on this jsfiddle link. <!DOCTYPE HTML> <html> <head> <title>leaflet bounds te ...

javascripthtmlcssleaflet

Removing negative numbers from Jquery Mobile Forms is essential for ensuring accurate and efficient

Greetings in Jquery Mobile form input field <div data-role="fieldcontain"> <label for="price">Price:</label> <input id="priceField" name="price" type="number" data-role="none" value="{{price}}" > </div> Encountering ...

jqueryformsmobile

The Ajax success callback is failing to update the background-image property after receiving a successful JSON response

I am struggling with setting a background image in wordpress despite receiving a successful ajax response. The image url is being returned successfully in the json response, but I can't seem to set it as a background image. Here is the ajax function ...

javascriptjqueryajaxjsonwordpress

Several tasks carried out within a loop

I am working on a PHP page that includes spoilers and I am using JavaScript to show or hide them. The process involves changing classes on the span of each spoiler div (.hidden, .visible) with classes like s1, a1, s2, a2, s3, a3, etc. My goal is to select ...

javascriptphpjquery

Retrieve the $$state value from the Service Function

I am new to Angular and struggling to understand a function in my service. I have this code snippet: checkRoomNameStatus: function() { var promises = []; var emptyRooms = []; DatabaseService.openDB().transaction(function(tx) { tx.exec ...

javascriptangularjs

Navigating through intricate HTML structures with JavaScript can be challenging

Snippet of 01.js code: var childElements = document.getElementById('selected-plays').getElementsByTagName('li'); function getRequiredElements(childElements) { var listItems = []; var i = 0; for(i = 0 ; i < childElements. ...

javascripthtmldomdom-traversal

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: https://i.sstatic.net/1wtit.jpg Here is the HTML code that I have implemented so far: < ...

javascripthtmlhtml-table

How to effectively utilize ViewChildren _results in Angular 4?

I'm working with a list of checkboxes that are generated within an ngFor loop: <md-checkbox #hangcheck [id]="hangout?.$key" class="mychecks" > I'm Interested </md-checkbox> To reference these checkb ...

javascriptangular

Tips for preventing nested subscriptions from exceeding two levels

I have four subscriptions that depend on each other. While there are numerous suggestions on avoiding nested subscriptions, they often don't address more than two levels of nesting. How can I prevent so many nested subscriptions? This is the code fo ...

javascriptangular

Changing the style of bootstrap.css

I need to make modifications to an HTML page that is using bootstrap.css. The specific line I am focusing on is <input type="submit" class="btn btn-primary btn-block btn-md" value="Create"> This points to .btn { display: inline-block; ...

cssbootstrap-4

Troubleshooting the "dispatch is not a function" error and finding a resolution

Currently, I am working on a react-redux project that involves fetching movie information from the OMDB api based on user-provided search terms. I'm facing an issue where the text entered into the search bar is not updating the store value for the fil ...

javascriptreactjsreduxreact-redux

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

javascriptjqueryhtml

Having trouble establishing a connection between MongoDB Atlas, NodeJS, and Mongodb

Encountering an issue while attempting to establish a connection with MongoDB. The error seems to be related to the 'connect' keyword itself. I am unsure of what the exact problem is. The error message displayed is as follows: mongodb.connect( ...

javascriptnode.jsmongodbexpressmongodb-atlas

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

csstwitter-bootstrapnavbar

Pagination handling on ASP.NET Core server-side operations

I am currently working on implementing server-side pagination for loading data progressively into the browser. Here is a snippet of my controller action code: [Route("api/meteorites")] [HttpGet] public IActionResult GetAll() { var meteorites = _co ...

jqueryasp.netajaxd3.jspagination

Displaying the outcome in the success section using ajax

Issue with data insertion into database using ajax: The output is not showing up in the success section. Please review my script and form code below for any errors. Code: <script> $(document).ready(function () { $('#data_form' ...

jqueryajaxcodeigniter

Tips for selectively executing a script based on whether the DIV is within the viewport

I have a created a script as shown below: jQuery(function($) { $('.count').countTo({ from: 0, to: '400', speed: '3000', refreshInterval: 50, onComplete: func ...

javascriptjquery

While creating a customer profile sample, I encountered an issue where I received an error message stating "POST http://localhost:3000/cusprofiles/add 400 (Bad Request)" when attempting to add data

I'm having trouble creating a customer profile for a vet clinic in my code. I'm unable to add and edit customer details, and I'm not sure where I've made a mistake. The only method that seems to be working is the GET method. Can someone ...

javascriptreactjsmongodb