jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option.

In my case, I have several sortable lists that are connected within separate containers with set maximum heights and overflow scrolls:

<div class="list">
  <div class="item">A1</div>
  <div class="item">A2</div>
  <div class="item">A3</div>
  <div class="item">A4</div>
  <div class="item">A5</div>
</div>

<div class="list">
  <div class="item">B1</div>
  <div class="item">B2</div>
  <div class="item">B3</div>
  <div class="item">B4</div>
  <div class="item">B5</div>
</div>

The challenge I am facing is the inability to scroll each container when items are dragged between them. Currently, only the parent container scrolls, which is not ideal for my scenario where I need both connected list containers to scroll.

You can view a basic setup of this situation on this codepen: http://codepen.io/typ90/pen/pymOdV

I have attempted to use the helper option in the sortable function to clone the item and append it to other containers as it's being dragged around, but without success.

If you have any suggestions or ideas on how to tackle this issue, please let me know!

javascriptjqueryhtmlcssjquery-ui

Answer №1

To enhance your sortable setup, simply include the code snippet provided below:

over: function (e, ui) {
  $(ui.sender).sortable('instance').scrollParent = $(e.target)
}

Your modified configuration will look like this:

$('.list').sortable({
  items: '.item',
  connectWith: '.list',
  over: function (e, ui) {
    $(ui.sender).sortable('instance').scrollParent = $(e.target)
  }
});

Answer №2

Unique solution using helper function and clone method

$('.list').sortable({
  connectWith: '.list',
  placeholder: 'ui-state-highlight',
  helper: function (event, element) {
    return element.clone().appendTo($('.connectedSortable').not(element.parent()));
  }
});

In my specific scenario, I encountered a z-index problem with the sort element that prevented me from solely relying on the "clone" option.

Credit to for this insightful solution.

Answer №3

I encountered a similar issue as the original poster, where the accepted answer did not work for my specific scenario. The errors persisted despite following the recommended solution.

Upon further investigation, I realized that the solution was almost there - the only missing piece was ensuring that ui.sender was truthy.

$('.elements').sortable({
  items: '.box',
  connectWith: '.elements',
  over: function (event, ui) {
    if (ui.sender) {
      $(ui.sender).sortable('instance').scrollParent = $(event.target);
    }
  }
});

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

How can I load a URL without causing a page refresh?

While searching around, I stumbled upon this HTML 5 code snippet: window.history.pushState("object or string", "Title", "/new-url"); I started thinking: how can this be implemented? Is there a way to utilize this code to change the URL to without needin ...

javascriptajaxhtml

Challenges in using Three.js on mobile devices with orientation capabilities

I'm currently running tests on a web application built using three.js, and it seems that users on tablets, especially Android devices, are experiencing some unusual behavior within the scene. https://i.sstatic.net/FkFi3.jpg Below is how the view sho ...

javascriptandroidthree.js

Learn how to use jQuery to dynamically insert a table inside a div element in HTML, specifically for jQuery

Currently, I am attempting to incorporate HTML code through JQuery Ajax. I possess an HTML form (jQuery mobile) where data gets sent to a PHP file upon clicking the submit button using JQuery Ajax. The PHP file then responds with JSON data structured thi ...

jqueryhtmlajaxjquery-mobilehtml-table

What is the best way to show the probability of users' bets in percentage form based on their wagered amounts?

I am currently working on creating a Jackpot Roulette game that features a main pot. Each round sees users joining and placing bets that contribute to the main pot, with the winner taking home the entire amount. My goal is to provide each user with real-t ...

javascriptprobability

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

Steps for achieving uniform positioning of a div element that dynamically appears within a table with two rows and four table data cells

If I want to display the same div in different positions dynamically on my page, how can I achieve that? My page has a table with two rows and two columns, each containing an Embed button. When these buttons are clicked, a div is shown with a list of site ...

jqueryhtmlcss

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

javascriptjqueryhtmlcss

Mastering the Art of SQL Submission with PHP Ajax Requests

I've encountered an issue with a form that, upon validation, triggers two Ajax requests before submitting the data to create an entry in a MySQL database. The Ajax requests generate URLs to Google Documents using upload.php. However, when certain unk ...

javascriptphpjqueryajaxforms

Retrieve the ID from either a search query or an insertion operation in MongoDB

I find myself frequently using this particular pattern. It feels a bit cumbersome to make two MongoDB calls for the task, and I am curious if there is a more efficient way to achieve this. My goal is to obtain the ID of an existing document, or.. create ...

javascriptmongodbmeteor

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

While attempting a synchronous ajax request during the beforeunload event, I encountered an error stating that synchronous ajax requests are not supported in chromium browsers during page unload events. I am seeking alternatives for making a synchronous a ...

javascriptajaxasp.net-mvcgoogle-chromemicrosoft-edge

Choosing the appropriate data type for form data on the server

Seeking assistance on uploading an audio file to my server using the following method: var fd = new FormData(); fd.append('fname', 'test.wav'); fd.append('data', soundBlob); $.ajax({ type: 'POST', url: &apos ...

javascriptc#jqueryajax

Tips for retrieving form data using $_POST from the same page after submission via $.ajax

On my index.php page, there is a form with a text field that I want to retrieve using $_POST. The issue arises because I am utilizing JQUERY AJAX on the same page. Specifically, I am using the $.ajax function to pass data to another PHP page. However, if I ...

phpjqueryajax

The multi-item carousel slider in Bootstrap 4.0.0 pen is experiencing issues when integrated with Bootstrap 4.5.3

After searching extensively, I finally stumbled upon a multi-item carousel compatible with bootstrap 4 that meets all my requirements: It is completely responsive (displaying only one item on smaller screens) It features animations <div class="co ...

jquerybootstrap-4carousel

What would be the counterpart of setLocale in Yup for the zod library?

How can I set default custom error messages for Zod validation? If I want to use i18n for error messages in Yup, I would do the following: import { t } from "i18next"; import * as yup from "yup"; import "./i18next"; yup.setL ...

javascripttypescriptyupzod

Using Jquery to access items in an array with associative keys

I'm attempting to arrange my list of locations based on shortest to longest distance using the following code snippet: for(var i=0; i<locations.length;i++) { var swapped = false; for(var j=locations.length; j>i+1;j--) { if ...

jqueryarraysindexing

troubles with dividing string

Recently delving into JavaScript/Angular development and encountering a little roadblock. I am attempting to break up a string of a textarea into an array at the \n character within a controller by utilizing $scope.mytext.split("\n"), however, I ...

javascriptangularjs

How can I gather information from members who have already signed up?

I have a form that submits data to the Angular Firebase database. Once the form is submitted, I want to display the previously submitted data in the form if the user signs in again. Below is my .ts file: import { Component, OnInit } from '@angular/c ...

javascriptangularfirebase

What is the best way to manage the browser tab close event specifically in Angular, without it affecting a refresh?

I am trying to delete user cookies when the browser tab is closed. Is this achievable? Can I capture the browser tab close event without affecting refreshing? If I attempt to use beforeunload or unload events, the function gets triggered when the user ref ...

javascriptangularjscookies

Show the JSON response from the controller on the view page

In my controller, I have a JsonResult action that returns a list of House objects. My goal is to retrieve this data onclick using ajax and display the JSON data within my view. While I can see the proper response and JSON result in Firebug, I'm not su ...

c#javascriptajaxjsonasp.net-mvc-3

Creating a hash from a string in Javascript

I'm struggling with the process of converting a string into a nested hash in JavaScript. Here is the string I want to convert: "{'btc_usd': {'price': 376.2, 'volume': 42812.69, 'change': -0.5},'btc_cn ...

javascriptjsonhash