/    Sign up×
Community /Pin to ProfileBookmark

Dragging TRs to rearrange order of table rows = how ?

Copy linkTweet thisAlerts:
Sep 03.2003

I have a table with multiple columns, the last of which is “position”.
I need to allow a user to drag rows, up and down the table and drop them where they want them, ideally they should see a semi-transparent copy of the row they are dragging during such.
The row then gets put in new place and the old one removed.

I need to update a variable which will get sent to server so that the serverside PHP code can easily save the updated order. ( I can easily do this. )

If it helps, each TR has a unique ID which matches the coresponding serverside database record ( MySQL ).

If dragging the rows is too complicated, then button 2 buttons, 1 either side of “position” for up & down respectivly, which just swap the row with either above row or below row will suffice.

A solution to this would be very much appreciated.

Ideally the code needs to be cross-browser ( 1 of the site admins uses an iMac with IE5.1 )

I will much appreciate any/every response.

Cheers,
Hawk.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliSep 03.2003 — you should go to mozilla.org and search for DOM useage examples,try writing it your self and post a specific problem here while trying to complete it.People make money for such projects,it seems unfair that you want it to be done for free.
Copy linkTweet thisAlerts:
@HawkauthorSep 03.2003 — OK, right, I ain't a newbie @ JavaScript.

What I really need to know is : How I determine which 2 rows I'm between when dropping; in a suitable manner for me to easily insert there.

As for when dragging, If I try to put the row @ cursor, then :

a) I loose column widths 'cos I need to create a new table to render there.

b) The top corner is getting drawn @ cursor position, I don't know how to work out the initial offset of "pick up point", so if for instance the mouse is held down in centre of row being moved, then the overdrawn row is offset by half its widht & hight.

Any individual pointers or code snippets or anything will be much appreciated.

On other foums I regularly use, people generally give more useful replies, U don't have to give me full solution .... but actually I will consider paying ... wanna gimme a quote for full solution ?

A few tips would be great and I'll sort the rest and maybe post back later with 1 or 2 very specific points to "polish it off"

Cheers,

Hawk.
Copy linkTweet thisAlerts:
@Khalid_AliSep 03.2003 — Here is the logical flow and some ideas how you can achieve this.

  • 1. capture mousedown events

  • 2. from the event object get the src element

    3.from the src element get the parent tr element

  • 4. then when user drops the tr perform the 3 steps above to find out where user wanted to drop this row and then use object.insertBefore() or insertAfter DOM methods.

    There you have it.


    • Its almost complete solution...?

    P.S

    all of us here are volunteers,I am sure money will motivate some of us to write some code for you..:p
    ×

    Success!

    Help @Hawk spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.7,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...