Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

Jquery Sortable

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
brihol44
Asked:
brihol44
  • 3
  • 2
1 Solution
 
Tom BeckCommented:
Am I missing something?

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

Including the custom placeholder it looks like this:

http://jsfiddle.net/JhHpe/2/
0
 
brihol44Author Commented:
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
 
Tom BeckCommented:
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
 
brihol44Author Commented:
Awesome! Nice job and thank for explaining things so I can learn.
0
 
Tom BeckCommented:
You're welcome, glad to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now