/    Sign up×
Community /Pin to ProfileBookmark

Ordering Tables in Javascript

Good Morning Helpers

I’m hoping we have a JS expert here who can help me.

I have a container which has a number of tables inside it. I’m needing to reorder these tables hen save that into a database.

I’ve got started, I used this to base what I have – https://www.w3schools.com/html/html5_draganddrop.asp

Currently when I drag & drop tables I get this error

>

index.php604 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
> at drop (index.php:604:12)
> at HTMLDivElement.ondrop (index.php:103:162)

Here’s my code

https://codepen.io/kodee/pen/LYzMzmy

Also when posted how could I determine the order? I was thinking of having a hidden input field with a unique ID in each, and just loop through a POST and treat them in which the order the POST is in?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 14.2022 — @singaporeDude#1641486

Hi, the example from w3schools needs some more modifications:
  • - All event handlers have to be added to the containers of the tables.

  • - The element having been dragged has to be inserted behind the element where it was dropped.

    This codepen is working for me:

    https://codepen.io/Sempervivum/pen/RwLEBEz
  • Copy linkTweet thisAlerts:
    @singaporeDudeauthorJan 18.2022 — @Sempervivum#1641495

    Thank you good Sir.

    One thing I have noticed, if you place content in the table. Even a paragraph text. When you drag and drop a table onto this content you get errors and the process fails.

    It seems you can only drop the table onto an empty whitespace area of another table.

    Any clues why and how to overcome this?
    Copy linkTweet thisAlerts:
    @SempervivumJan 18.2022 — @singaporeDude#1641664

    When I add content to one element like this:

    https://codepen.io/Sempervivum/pen/RwLOBMx

    it keeps working fine.

    Please post the HTML you are using.
    Copy linkTweet thisAlerts:
    @daveyerwinJan 19.2022 — @Sempervivum#1641667

    try this ...

    https://codepen.io/daveyerwin/pen/mdBgoYK
    ``<i>
    </i>
    `
    ×

    Success!

    Help @singaporeDude 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 3.28,
    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: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

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

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...