SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reorder sideNav via drag and drop?

    I have a side nav, which the children are ordered via a table in the data-base.

    I want to build it so that when in the administration I can drag and drop one of the links in the sidenav to a new location in the side nav to quickly reorder the sidenav as I please.

    Is this possoble?

    Thanks.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure myself to accomplish the goal but i have to say that it is possible with help of some sources. I found a good one here:
    http://www.dhtmlgoodies.com/index.html?page=dragDrop

    If you have already not gone with this.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an example of what I want here:
    http://tool-man.org/examples/sorting.html
    under: Example: Sortable links or buttons

    but they dont really offer any help on making your own.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not that hard really to make one on your own.

    You basically need these things:

    1) Add mousedown event on all your listitems. On mousedown, make the listitem position: absolute;, and insert an empty dummy element right before the clicked listitem to fill out the place where the listitem used to be (since it's now absolutely positioned).

    2) Add mousemove event to document. During this event, re-position the absolutely positioned element to follow the mouse, and also check if the mouse is above any of the other listitems. You can do this by looping throught them, getting their position on the screen with findPos() (http://www.quirksmode.org/js/findpos.html), getting their offsetHeight and offsetWidth and compairing that with e.pageY and e.pageX. If the mouse is above an element, you just remove the dummy from the old place, and insert right before the hovered element.

    3) On mouseup, remove mousemove event, and remove the dummy after inserting the absolutely positioned element right before the dummy, and removing position: absolute;

    It's a bit trickier than just this, but this is basically how I do it.

  5. #5
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @wysiwyg I got one question, how can I insert a dummy and pick where to put it

    example:

    <ul>
    <li id=a></li>
    <li id=b></li>
    <li id=c></li>
    <li id=d></li>
    </ul>

    say I grabed C and started dragging it, what would be the code to create a dummy and more especially how could I place it where C was?

    Thanks.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just clone the node, and give it full opacity. Something like:

    var dummy = this.cloneNode( true );
    dummy.id = 'dummy';
    dummy.style.opacity = 0;
    this.parentNode.insertBefore( dummy, this );

    That way, the dummy gets inserted into the list, and takes up the space the listitem took up.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •