Jquery Sortable

Posted on 2014-04-30
Last Modified: 2014-05-01

I have two issues I'm trying to solve here...

1. If I take a sub-item right now I can drag that sub-item to the main level. I only want to allow the sub-items to be sortable within main groupings.

2. The second issue is that if I drag a main grouping over a sub-item area the "placeholder" css is showing a default state within in the sub-item listings depending the area. I would like to not mislead the user in thinking they can take a main grouping and place it within another main grouping even though the jquery ui is not allowing it on dropping it there (being canceled).

Thanks for the help!
Question by:brihol44
  • 3
  • 2
LVL 38

Expert Comment

by:Tom Beck
ID: 40032857
Am I missing something?

Including the custom placeholder it looks like this:

Author Comment

ID: 40033248
Thx for the help. I had that working initially but my original jsfiddle I sent was the closest in that I could move any sub-menu or element into any main group not just the original group that you see it in initially.
LVL 38

Accepted Solution

Tom Beck earned 250 total points
ID: 40033654
Okay, I did not pick up on that functionality.

In that case, I would suggest not initializing the sortables until you know which level <li> is being grabbed. You can do this on mousedown.

Note that in order for you to be able to move inner <li> items into any empty outer containers, you will need to have an empty <ol class="inner"> inside all top level <li>s so you have a container to drop the inner <li> items into. Also, that inner <ol> will need to have some minimum dimension for it to actually provide space to drop the inner <li> items into. To that end, I have added this bit of css to your fiddle.

ol > li > ol {

Author Closing Comment

ID: 40034753
Awesome! Nice job and thank for explaining things so I can learn.
LVL 38

Expert Comment

by:Tom Beck
ID: 40034775
You're welcome, glad to help.

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 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