Tips for simultaneously dragging multiple items individually using JqueryUi sortable

I have conducted extensive research but have not found a suitable solution for my specific case. Below is the simplified version of my HTML structure:

<div>
  <div>
    <ul class="sortable">
      <li id="item-1">
        <!-- item -->
        <ul>
          <!-- many li tags here with ids like: item-1.1, item-1.2, and so on -->
        <ul>
      </li>
    </ul>
  </div>
  <div>
    <ul class="sortable">
      <!-- same structure as above -->
    </ul>
  </div>
</div>

My goal is to drag "item-1", "item-2," etc., along with all their children simultaneously. However, when dragging "item-1.1" or "item-1.2," they should be moved separately. I attempted using the multisortable jQuery plugin, but encountered an issue where the placeholder had excessive height due to CSS styling:

  background-color: rgba(220, 224, 228, .25) !important
  height: 150px
  margin-bottom: 8px
  border-radius: 8px
  border: 1px solid $color-border !important

Here is the code snippet I am currently using for sorting:

const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}
$(".sortable").sortable(sortableOptions).disableSelection();

Is there a way to achieve the desired functionality in this scenario?

javascripthtmljquerycssjquery-ui-sortable

Answer №1

To make the child ul elements sortable, simply add the class .sortable as shown below.

I've made some adjustments to the CSS, trying to avoid using !important whenever possible. Padding has been added to the bottom of the .sortable elements to make dragging items to the end of the list easier, and indented droppable areas are now displayed with a dashed border.

You'll notice that you can keep indenting subsequent droppable child ul elements, although it can start to look quite cluttered!

If this isn't exactly what you were looking for, please let me know.

const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}

$(".sortable").sortable(sortableOptions).disableSelection();
.sortable {
  background-color: rgba(220, 224, 228, .25);
  padding-bottom: 1em;
  border-radius: 8px;
  border: 1px solid blue;
}

.sortable .sortable {
  background: none;
  border-style: dashed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <ul class="sortable">
    <li id="item-1">
      <!-- item -->
      Section 1
      <ul class="sortable">
        <li>1.1
        </li>
        <ul class="sortable">
          <li>1.1</li>
          <li>1.2</li>
        </ul>
        <li>1.2</li>
      </ul>
    </li>
  </ul>
</div>
<hr>
<div>
  <ul class="sortable">
    <li>Second List Group 1
      <ul class="sortable">
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </li>

    <li>Second List Group 2</li>
  </ul>
</div>
<hr>

<div>
  <ul class="sortable">
    <li id="item-1">
      <!-- item -->
      Section 1
      <ul class="sortable">
        <li>1.1
        </li>
        <ul class="sortable">
          <li>1.1
            <ul class="sortable">
              <li>1.1.1</li>
              <li>1.1.2</li>
            </ul>
          </li>
          <li>1.2</li>
        </ul>
        <li>1.2</li>
      </ul>
    </li>
  </ul>
</div>

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

Uncheck the box for disabling the bottom row of HTML tables

I need help with disabling a check box under certain conditions. Specifically, I want to disable the check box if there is only one row in the table or if it's the last row, but for some reason it's not working as expected. Here is the HTML: &l ...

javascriptjquery

The issue with two different link styles displaying correctly in Internet Explorer but not in other browsers is that when a link is clicked, all links appear

Looking for a testing ground? Check out my website: While everything works smoothly on IE, I've noticed a glitch in other browsers. Clicking on one link causes all links on the page to appear as visited links. Take a look at the CSS code below: @ch ...

htmlcssgoogle-chromefirefox

Tips for concealing a tooltip once a checkbox becomes enabled

I want to show a tooltip only when a checkbox is disabled. Once the correct format is typed into an input text field, the checkbox should become enabled. Currently, I am able to display the tooltip when the checkbox is disabled, but it does not hide when ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Communication between the content script and background page in a chrome extension is not functioning correctly as intended

Displayed below is the code I posted: manifest.json { "manifest_version": 2, "name": "Demo", "description": "all_frames test", "version": "1.0", "background": { "scripts": ["background.js"] }, "content_scripts": [{ "matches": ...

javascriptgoogle-chrome-extension

Having trouble with React Page crashing when trying to access the component state

I'm attempting to create a side-bar menu that swaps out content in a <main> tag when menu buttons are clicked. However, I'm facing an issue where the page becomes unresponsive and eventually crashes due to React issues while trying to read ...

javascriptreactjsmaterial-ui

Tips for embedding a script snippet into an Angular HTML file

Incorporating Bootstrap tooltip in a component using CLI and Bootstrap: Take note that Tooltips need to be initialized with jQuery: <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> W ...

jqueryangularbootstrap-4

How can one access a div tag within a script using Jquery?

I am faced with a challenge related to accessing the div tag "warningMessage" within my HTML code. Below is the snippet that contains this div tag under scripts: <script id="notePopup" type="text/x-kendo-template"> <p class="notePopupMessage" ...

javascriptjqueryhtmlcss

Preventing Actions in Vue Router When a User Clicks on Menu Links

When dealing with JavaScript Single Page applications, such as Vue.js, and you have a form with a lengthy submit action (like saving something), it is crucial to handle the scenario where the user navigates away before the operation completes. In this case ...

javascriptvue.jssingle-page-applicationvue-router

Tips on removing HTML tags that are empty and contain white spaces or their corresponding HTML codes

Looking for a regex solution to use with preg_replace. This specific query was not addressed in previous discussions, as the tags I need to remove are not always empty. In addition to eliminating empty tags from an HTML structure, I also need to handle t ...

phphtmlregexpreg-replace

What is the best way to make the block rotate each time the button is clicked?

Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...

htmlcsssvg

Can a horizontal navigation bar be designed to span the full width of the page without relying on a table?

I'm trying to create a horizontal navigation menu with variable width buttons that spans the full width of the containing div. I was successful in achieving this by using a table, as demonstrated in this example. The table cells adjust their size base ...

htmlcss

Sorting an array based on the presence of a specific character in JavaScript: [JS]

I have an array named files: ['Cpp-New.html', 'dirname', 'dirname.html', 'dirname.py', 'HarryPotter', 'Java-New.html', 'poop.css', 'test01.html', 'Web-New.html'] tha ...

javascriptarraysstringsorting

Trouble with canvas setLineDash and lineDashOffset persisting in iOS/Safari?

Check out the fiddle linked here: http://jsfiddle.net/mYdm9/4/ When I execute the following code on my PC: ctx.lineWidth=20; ctx.setLineDash([20,30]); ctx.lineDashOffset=10; ctx.beginPath(); ctx.moveTo(150,150); ctx.lineTo(240,240); ctx.lineTo(180,40); ...

javascriptioshtmlcanvassafari

Sorting Questions by Category

I am looking to organize a set of quiz questions into three different categories - Math, English, and Science. Is there a way to label each question within the array with its respective category and create a function that calculates scores based on these c ...

javascripthtmlarrays

Setting a default value in a multi-select dropdown using react-select

I have taken over management of my first React app, and I am facing a seemingly simple change that needs to be made. The modification involves an email signup page where users can select their interests from a multi-select dropdown menu. My task is to mak ...

javascriptreactjsreact-select

Learn how to dynamically import and load components in VueJS while rendering a list

I am currently rendering a list. <div v-for="msg in messages"> <div v-if="msg.type==='component'"> <component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component> </div> ...

javascriptvue.jscomponents

Creating a pros and cons form for users using jQuery involves dynamically checking and updating the input values to ensure that no

When a new value is entered into the input box in this code, it will add and replace it for all P's tag. The desired change is to create a div with .pros-print class after each other, where the content of the P tags is equal to the new input value whe ...

javascripthtmljquerycss

npm is unable to install a forked git repository in its current state

Attempting to install a customized version of ng2-smart-table on my application, but npm seems to be struggling with the process. I've experimented with various commands such as npm install git+http://github.com/myusername/ng2-smart-table.git npm i ...

javascriptangularnpm

JavaScript error: Property 'includes' of undefined cannot be accessed

To verify the existence of data.objectId in the array msgArr, I am utilizing the following code snippet: var exists = msgArr.some(item => item.objectId === data.objectId); if(!exists){ msgArr.push({"objectId":data.objectId,"latLont":data.latLont," ...

javascripttypescriptecmascript-6

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

javahtmlseleniumxpathselenium-webdriver