Solved

Jquery Sortable

Posted on 2014-04-30
5
271 Views
Last Modified: 2014-05-01
Hello,

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

http://jsfiddle.net/JhHpe/

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!
0
Comment
Question by:brihol44
[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
  • 3
  • 2
5 Comments
 
LVL 38

Expert Comment

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

http://jsfiddle.net/JhHpe/1/

Including the custom placeholder it looks like this:

http://jsfiddle.net/JhHpe/2/
0
 

Author Comment

by:brihol44
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.
0
 
LVL 38

Accepted Solution

by:
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.

http://jsfiddle.net/JhHpe/3/

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 {
      min-height:10px;
      min-width:100%
}
0
 

Author Closing Comment

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

Expert Comment

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

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

615 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