Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created:

<ul accept="section" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">

  <li id="section1" class="dojoDndItem" dndtype="section">
     <ul accept="attribute" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li dndtype="attribute" id="attribute1"></li>
       <li dndtype="attribute" id="attribute2"></li>
       <li dndtype="attribute" id="attribute3"></li>
     </ul>
  </li>

  <li id="section2" class="dojoDndItem" dndtype="section">
     <ul accept="attribute" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li dndtype="attribute" id="attribute1"></li>
       <li dndtype="attribute" id="attribute2"></li>
       <li dndtype="attribute" id="attribute3"></li>
     </ul>
  </li>

</ul>
javascripthtmlcssdojodrag-and-drop

Answer №1

Looking to rearrange the inner list items within and between lists, as well as move the outer lists around? Consider this solution:

<style>
.container {
  width: 50%;
}
</style>

<ul accept="section" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
  <li id="section1" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li class="dojoDndItem" dndtype="attribut" id="attribut1">one</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut2">two</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut3">three</li>
     </ul>
  </li>

  <li id="section2" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li class="dojoDndItem" dndtype="attribut" id="attribut4">four</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut5">five</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut6">six</li>
     </ul>
  </li>
</ul>

The modifications include:

  • Corrected duplicate IDs in the second list.
  • Adjusted the 'container' class width to facilitate grabbing and moving entire lists.
  • Enabled draggable functionality for internal list items by adding the "dojoDndItem" class.

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

Error: Uncaught object in AngularJS ngRoute

I keep encountering an uncaught object error in my browser console while trying to load my AngularJS application. I am unsure if this issue is related to ng-route.js or if it's something else, as the error message only says 'uncaught object' ...

javascriptangularjs

AngularJS Multi-select Dropdown Filter Logic

Thank you for taking the time to review my query. Currently, I am working on an AngularJS UI-Grid project where I have incorporated a Multi-select Drop-down Menu for the "First Name" column. However, I am facing challenges in implementing the logic similar ...

javascriptangularjsui-grid

Choose CSS Option

I need assistance with customizing my dropdown select option - see the example below <select> <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> <option value="saab">Saab</option> <option val ...

htmlcsstooltiphtml-select

Troubleshooting Django Python: Why can't I retrieve a JS object sent via AJAX in my Python QueryDict?

As I work on my Django project, I've set up a system for data exchange between the server and client using javascript and python with AJAX. To make things easier, I created a config object in JS to store important parameters that both the server and J ...

javascriptpythonajaxdjango

Using PHP and AJAX, populate a table based on the selection made from a dropdown

Hello, thank you for taking the time to review my issue. Let me outline the objective. I have successfully implemented two drop-down menus that are populated dynamically from a database. The query retrieves names and phone numbers (with plans to fetch mor ...

javascriptphpjqueryajaxwordpress

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

javascriptvue.jsauth0

How can I incorporate a custom icon into the <i> tag in HTML like Bootstrap does with its icons?

When working with Bootstrap, you can easily add an icon using the following syntax: <i class="bi bi-arrow-right-square-fill fs-1"></i> One great feature is that you can adjust the size of the icon by simply adding the fs-1 class. If ...

htmltwitter-bootstrapbootstrap-5

Error retrieving resource: server returned a 404 status code indicating file not found for javaScript and CSS files

I can't seem to get my css and js files to load on the server. Here is how my file structure looks like: GAME_Folder HTML doctype html head link(href='https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' rel='sty ...

javascripthtmljquerycssnode.js

What is the process for making an ajax call in CakePHP?

It may seem obvious, but I've searched the internet and couldn't find any useful or updated information on this topic. I'm attempting to make an ajax request in CakePHP controller to retrieve both view contents and JavaScript code. The aja ...

javascriptphpjqueryajaxcakephp

Having issues with the Email type in the JQuery Validation Plugin?

Recently, I set up a Grunt file to consolidate all my libraries and code into a single JS file for inclusion in my website. However, after adding the JQuery Validate plugin (http://jqueryvalidation.org/), I noticed that it's not working as expected. I ...

javascriptjqueryjquery-validate

Unable to transfer the component between components

This is the code I have: index.js: import React from "react"; import ReactDOM from "react-dom"; import {dest, People} from './components/people'; import json from './people.json'; function initFromJson() { let names = []; for(let ...

javascriptreactjs

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

Refreshing the information in the database table

Upon receiving data from the server using ajax, I populate this table: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +data[i].B ...

javascriptjqueryhtmlajaxjson

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

The data seems to have disappeared from the HTTP requests in my Express and Mongoose project

I'm currently working on some files for a recipe app project. One of the files is recipe.js, where I have defined the Mongoose Schema for recipes and comments. The code snippet from the file looks like this: const express = require('express&apos ...

javascriptnode.jsmongodbexpressmongoose

Attempting to format a number using a computed property and .toLocaleString() fails to execute

I am facing an issue with the formatting of a number displayed in a <p></p> element. The number is coming from a range input element that is bound to an amount data property using v-model. Even though I have a computed property to format the nu ...

javascriptvue.jsvue-component

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

javascriptphpjqueryhtmlajax

Creating an Engaging Data Visualization: Blending Candlestick Insights with Line Graphs

I'm attempting to display a moving average on a candlestick chart, but I'm facing an issue where the path of the line is not fully appearing on the SVG canvas that I've created. I've searched through various posts to understand how to o ...

javascriptreactjsd3.jssvgcharts

Troubles with Vue and localStorage for storing a theme's data

I've been struggling with this issue for a while now while working on a Vue site. I have not been able to find a solution for my specific bug in other discussions. The concept should be straightforward - I want to have a switch that toggles a value b ...

javascriptvue.jsbuefy

What are the steps to leverage npm installed packages in my .js files?

I'm new to web development and I'm trying to incorporate node packages into my workflow. Specifically, I'm attempting to test out the axios ajax library. It seemed like this would be a simple task, but it's proving to be quite challeng ...

javascriptnpm