Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

How do I create a nested accordian with draggable content in jquery?

Posted on 2015-01-30
2
Medium Priority
?
298 Views
Last Modified: 2015-02-03
Hi all,

I am trying to create a dynamic menu type structure in jQuery.
The idea is to have a nested accordion type structure where each 'group' can be dragged around within the structure.
When it is 'dropped', it's new parent info should be sent using Ajax
Each group should be expandable and collapsible.

Each item within these 'groups' can also be dragged around the structure.
When dropped, the items new group should be sent using Ajax.

There seems to be lots of examples around on the web dealing with either nested accordions or draggable content, but I cannot find anything showing how to use them in combination.

The data that will be used to populate this structure is in two arrays:
Group Array which contains an ID, Group Title and it's parent id (no parent = -1).
Entry Array which contains various properties and the group ID to which it belongs.

If anyone knows the best way to do this I would very much appreciate it.

Many thanks,

James
0
Comment
Question by:James Atkin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 40580104
>>> but I cannot find anything showing how to use them in combination.

That should be sending you a message.  What you want to do is very complex.  I doubt you are going to find anything off the shelf that meets those requirements.  So you have two options write it yourself (perhaps by modifying a plugin from the web that does part of the job) or if you lack the skills to work at the complex level required, hire a professional developer with good jquery skills to write it for you.

Cd&
0
 
LVL 4

Author Closing Comment

by:James Atkin
ID: 40585670
That is exactly what I have done previously and it works fairly well.
With the amount of jQuery out there now (and there are some stunning examples), I thought that maybe there was a more polished version around to achieve my goals.
I guess for the moment I can live with what I have and perhaps look into doing something more dramatic further down the line.
Thanks for the input though.
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question