Drag 'n' drop columns

Drag 'n' drop columns

jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
edited October 2009 in Plug-ins
Hi,

I know the request for being able to drag columns to re-order has come up once or twice. I've been using a library called 'dragtable' (http://www.danvk.org/wp/dragtable/) and integrated it with DataTables, which up until today has been fine. Unfortunately, the complicated integration between DataTables, Allan's FixedHeader plugin and dragtable - not a jquery plugin - ended up with me running into an IE bug I couldn't fix.

I decided this evening to rebuild the dragtable feature as a DataTables plugin. I have the essential drag 'n' drop experience working, although a copy of the column doesn't yet float under your mouse, and there is some missing styling on the copy that is created.

(I have made an extra plugin as part of this that redraws the table using the data in oSettings.aoData/aoColumns - useful if you're interacting with that to update the information.)

I've put all the code up on pastebin and would very much appreciate any feedback: http://pastebin.com/f53745926



J.

Replies

  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    I have an update:
    http://pastebin.com/f4c763347

    - animated dragging works
    - dragging is cancelled if you move out of the table
    - column copy is styled correctly


    J.
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Next update.

    http://pastebin.com/f700955e3

    This is a big modification. Changes include:

    - much faster creation of floating column
    - works in IE!
    - text-selection doesn't happen when you drag
    - it's a DataTables plugin now

    Known issues:

    - column classes are not getting copied across

    It would be great if someone would see if they can use this as a plugin for their table.


    J.
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi J,

    Now this is awesome! :-)

    I've not had a chance to actually try it out yet, but I will endeavour to do so this weekend. Nice one!

    Allan
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Hi Allan,

    Take a look at it in action - http://tw.wiki-data.com/search?q=bank - this is the development site for the replacement to wiki-data.com.


    J.
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi J,

    This is superb! Sorry for the delay in replying to you, things are starting to cool down a bit at this end :-)

    I have two suggestions if I may:

    1. Adding a visual indicator to show where the column will be inserted. With narrow columns you can easily put a dragged column into an unintended position.

    2. Would it be possible to split your function which actually does the column swap into a separate plug-in, something which could be called programmatically (for example oTable.fnChangeColumns( 1, 4 ); ), and that will take care of iDataSort, filtering columns, hidden columns and all that stuff - and then your drag and drop would interface with that, allowing the developer to do something with JS if they want, or the end user to do your drag and drop.

    Regards,
    Allan
  • izzy6150izzy6150 Posts: 49Questions: 0Answers: 0
    Hi,

    I am just about finished with my version of Draggable Columns, just got a few fine tweeks to do. Some of the code used is that of jnthnlstr's pastebin, however I have integrated that with JQuery UI Sortable for ease of use.

    I may have to re-write it tho as a plug-in as currently for my job i have encapsulated it all directly into the dataTables stuff (Sorry :-) my boss is a real hard nutt.)

    Regards,
    Izzy
  • MisterCheesyMisterCheesy Posts: 2Questions: 0Answers: 0
    Hi, Im having a little trouble integrating the latest version of the pastebin code into my table.

    I have to admit I'm a little new to using plugins though.

    Does anyone have an example of how to enable/install/use this plugin in javascript?
  • danielsendanielsen Posts: 2Questions: 0Answers: 0
    Hi, I'm looking for a similar plugin to update the record ordering in the database, not only client-side. Where can I find one? Thanks.
  • SelicorSelicor Posts: 11Questions: 0Answers: 0
    Cool feaure. So is it stable - why is it not listet on the Plugins sections on the site?
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    The link to see it in action ( http://tw.wiki-data.com/search?q=bank ) doesn't work for me. I receive a "HTTP 404 - File not found" error.
  • SelicorSelicor Posts: 11Questions: 0Answers: 0
    Hi MikeS,

    same for me, i saw it a few months ago. i took a short look into the code, generelly i's exactly what it's meant to be. If you take a look here you can see it (but not in combination with Datatables) http://www.danvk.org/wp/dragtable/
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    Thanks for the link Selicor. I'd seen that demo a while back too, but, would have liked to seen it applied to datatables!

    How does one actually hook it up to datatables?
  • SelicorSelicor Posts: 11Questions: 0Answers: 0
    i found the LIVE implementation jnthnlstr mentioned - can be found here:

    http://www.wiki-data.com/search?q=bank&avid=&adv_1_field=Operational+City&adv_1_value=London&adv_2_field=Operational+Country&adv_2_value=GBR&index=0

    really nice...only thing i am missing is the feature Allen already mentioned above:

    1. Adding a visual indicator to show where the column will be inserted. With narrow columns you can easily put a dragged column into an unintended position.

    By the way: how did he integrate that SHOW | HIDE column feature? I like it a lot. Is there a plugin available?

    Greetings,
    selicor
  • SelicorSelicor Posts: 11Questions: 0Answers: 0
    Show Hide feature, just found it by myself:

    http://datatables.net/examples/api/show_hide.html

    greetings,
    selicor
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    Hey Selicor,

    You beat me to it. Thanks for that link. It is pretty cool. The only things that I don't like about it is the lack of a column sorting indicator and the fact that you need to double click the header to sort and the lack of multiple column sorting.

    Do you know how to hook up the column dragging plugin to datatables? I'm a complete noob and don't know where to begin.
  • tritri Posts: 10Questions: 0Answers: 0
    Hi *,

    how can i intergrate (http://pastebin.com/f700955e3) that to a default DataTables Installation ?
    Where do I have to include that js code ? Is there any "simple" Drag and Drop Feature / Plugin for Datatables planed ?


    Thank you.
    Tobi
  • redhookbakerredhookbaker Posts: 31Questions: 0Answers: 0
    hi,

    This is really nice, is there a sample code with datatables? thanks
  • redhookbakerredhookbaker Posts: 31Questions: 0Answers: 0
    I was playing around with this,

    $('#example).html( '' );


    the table can be dragged, but only for the first page, anyone knows why?
  • MisterCheesyMisterCheesy Posts: 2Questions: 0Answers: 0
    allan, can you help us out with this one? I need a little help with using this too--some sample code would be invaluable to several of us

    Maybe promote it to the plugin page? Or consider it as a true feature request for the future?

    It looks like a feature a bunch of people would appreciate and use.
  • SelicorSelicor Posts: 11Questions: 0Answers: 0
    yeah would be nice.

    greetings
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi guys,

    Yes, at some point column re-ordering will become a 'true' plug-in for DataTables. I think there are issues which still need to be resolved such as dealing with hidden columns, and a clearer UI - but this is quite certainly on the to-do list (there is just to much to do!).

    Regards,
    Allan
  • devksdevks Posts: 10Questions: 0Answers: 0
    Hi Allan,

    If we have a column reordering plug-in for Datatables now. Could you please point me to it.

    Thanks a lot.
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    http://datatables.net/extras/colreorder/ :-)

    Allan
  • devksdevks Posts: 10Questions: 0Answers: 0
    This is so awesome. Thanks Allan.
This discussion has been closed.