Drag and Drop element betwen Columns

jmoises

Active Member
Hi i search on the forum but looks like nobody have this request before.

I am trying to do the following scenario, create 2 tables and show columns depending the stages and be able to drag and drop the name from one stage to the other or to the end. Any advise or suggestion to follow is apreciated.

Names
- Id
- MyName
- MyStage_ID

Stage
- Id
- Description
- Position

upload_2019-12-12_9-38-4.png
 
Hi, i found this super cool javascript tool jkanban, i made work localy outside joomla/fabrik

https://www.riccardotartaglia.it/jkanban/?ref=producthunt

is exactly what i need be abble to drag and drop.

upload_2019-12-18_13-49-49.png

i creat a custom list template and add the require js files ass the samples i found on internet.

upload_2019-12-18_13-51-16.png

but after 4 days try and test diferents aprouch i cant get out of this errors so i ask for help!

Code:
jkanban.min.js:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'data-$hidden' is not a valid attribute name.
    at E (http://localhost/includes/jkanban/jkanban.min.js:1:1626)
    at jKanban.addBoards (http://localhost/includes/jkanban/jkanban.min.js:1:7319)
    at http://localhost/includes/jkanban/jkanban.min.js:1:2682
    at jKanban.init (http://localhost/includes/jkanban/jkanban.min.js:1:2748)
    at new jKanban (http://localhost/includes/jkanban/jkanban.min.js:1:8726)
    at http://localhost/components/com_fabrik/views/list/tmpl/negocio_tablero/javascript.js:8:15

i have put the Javascript, in the List_x file, in the javascript.js in the custom template, and also as plain code using <script> and i get the same error thanks for any help or advise ..

Code:
var kanban1 = new jKanban({
    element:'#myKanban',
    boards  :[
        {
            'id' : '_todo',
            'title'  : 'Try Drag me!',
            'item'  : [
                {
                    'title':'You can drag me too',
                },
                {
                    'title':'Buy Milk',
                }
            ]
        },
        {
            'id' : '_working',
            'title'  : 'Working',
            'item'  : [
                {
                    'title':'Do Something!',
                },
                {
                    'title':'Run?',
                }
            ]
        },
        {
            'id' : '_done',
            'title'  : 'Done',
            'item'  : [
                {
                    'title':'All right',
                },
                {
                    'title':'Ok!',
                }
            ]
        }
    ]
});
 
Last edited:
Since the "jkanban" code is not Fabrik, you'll need to ask the source for further help.

However, you may check on this yourself:
1. Does something with the ID "myKanban" (as referred to in your JS) exist?
2. Where is "data-$hidden" coming from? The dollar sign is certainly strange.
 
Even if the drag/drop is working: I assume you don't only want to drag/drop/display but you also want to store the result somehow?
 
@lousyfool yes i know is jKanban is not part of Fabrik, but i test jkaban localy outside the Joomla enviroment and is working fine, when i use joomla and fabrik i get the error. The data-$hidden is coming from jkanban.min.js when adding the boards.

@troester yes but i was planing to make that area first, then search how to use Ajax to save the data.

Thanks for answer
 
We are in need of some funding.
More details.

Thank you.

Members online

No members online now.
Back
Top