Hi,
Im using bootstrap table with column reorder feature but in firefox while dragging sort getting enable please tell me how to fix this issue?

Hi @akottr ,

Is there any way to preserve link clicking on the head section of the draggable table? As far as I can see the extension creates a temp list on top of the table, so the link cannot be clicked?

Thanks

Using dragtable and jQuery 1.7, table columns become draggable on the second click.

Hello,

I've used your plugin for a big table which contains a lot of columns. As you may have guessed, horizontal scrollbar gets visible to display all the columns. But my problem is after scrolling the page horizontally, plugin works but while dragging a column, it behaves like i've not scrolled. It displays the draggable object in the wrong place and i've noticed that scrolling mixes up the columns i've been dragging.

Have you ever been in a situation like this?

There is an issue while reordering columns. It works a couple of times, and then out of no apparent reason (at least for me) it throws an error in jquery.dragtable.js, line 400 (swapNodes()).
You can watch a screenvideo of the issue appearing here: https://www.dropbox.com/s/tlnr2go9ixn21kl/dragtable%20issue.mov?dl=0

Thanks a lot.

Why drag triggers with right click?

On firefox it triggers with right click and immediately gets untriggered because of the broswer's right context menu but in chrome gets messed up because it does not get untriggered when that context pop menu gets appeared.

Hello this plugin looks great,however is there any doco related to getting
the order list,

Just need to know in the following cases.
Once the dragtable is applied to a table - how can i get the current order list.?

Each column overlay has its own table, with the same attributes than the original table, i.e. ID, width, etc.
That conflicts with my stylesheet, makes impossible for me to override the width, and of course makes many same ID invalid.

I have implemented this plugin in my one of my cordova application but it is not working. it is not return any error.

Hi,

I don't want to include all of jQuery UI in my application so I was wondering if you could specify which components of jQuery UI are required for this plugin to work..

Thanks

When the last column has a width of let's say 50px and another column has a width of let's say 100px. Then when grabbing the bigger column at the right (between 50px and 100px it's not possible to set the column as the last column in the table.

See the picture here: http://i.imgur.com/WKjDW4S.png
Grabbing 2nd column on the red area and moving to right will fail to set it as last column. Green area works without a problem.

For this table the plugin is not working, the columns get messy when you try to sort them:

<table class="table dragtable"> 
  <thead> 
    <tr> 
      <th colspan="2">Color</th> 
      <th class="draggable">First Name</th> 
      <th class="draggable">Last Name</th> 
      <th class="draggable">Username</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <th scope="row">1</th> 
      <td>Red</td> 
      <td>Mark</td> 
      <td>Otto</td> 
      <td>@mdo</td> 
    </tr>  
  </tbody> 
</table>

Here is a jsFiddle that reproduces the issue: https://jsfiddle.net/fguillen/qnv72d5x/

If I dynamically add more columns using Javascript, they are not sortable, since there's no event attached to them.
Looking at the code, I saw that there is a redraw() method.
How can I invoke it? Is that necessary, or dragTable can understand when I'm binding the same widget to the same table and redraw it?

Hello,

After the containere has been scrolled, dragging columns is mulfunctioning. I think it does'n store scroll position so scroll returns back to it's initial position and after dropping the column it bounces back to it's scrolled position.

I've attached the sample project. Could you please help to fix this issue?

Thank you in advance.

https://dl.dropboxusercontent.com/u/24579227/sample.rar

Is it possible to update the dragtable when a new column is added to the table? Thnx.

Using dragtable.mod.js (works with tablesorter) http://mottie.github.io/tablesorter/docs/example-dragtable.html.

When I do restoreState: in the dragtable initialization, apparently it's too soon -- .config is undefined.

Can I do restoreState: later?

Something like $('selector').dragtable ('options', 'restoreState', sortOrder)? (But this doesn't work.)

Here is an example: http://screencast.com/t/OyFtcX87Aj

When the container has been scrolled, the dragged table header appears to be offset to the right by an amount equal to the amount scrolled.

If a table is wider than the viewport, some cell content is word wrapped by the browser. If you now drag a column, the column containing the word wrapped cell is wider that the original column, because the content is not word wrapped in the overlay column.

Are there any triggered events or any way so that I can check when I have reordered a column?

Thank you so much!

Hello Akottr,
first and foremost, thanks for this wonderful plugin. That said, here's something I had to do in order to get it working with a Backgrid-generated table. Starting from line 256:

this.sortableTable.el.find('> li > table').each(function(i, v) {
    var _this = $(this); 
    /* if (widthArr[i] < _this.width()) { */
        _this.css('width', widthArr[i] + 'px');
    /* } */
});

Without those lines commented out, the width of the draggable items defaults to the standard width based on each column's content. I still haven't had the time to track down what's happening and I intend to do that over the next few days. Still, I thought it'd be wise to ask for the author's opinion on the issue.

What do you think?

After I added second column (so, after second call to redraw), I receive "Error: cannot call methods on dragtable prior to initialization; attempted to call method 'redraw'" message. Table is relatively easy, and there's just one handler (on click) on table header (to display text input). And column that was inserted before this error received can't be moved. Others still can be moved. I think there's a problem left after the first call to "redraw". I'm trying to investigate the problem myself, but I don't have much time.

The tables in the application I'm working on have a border around the entire table, but not between the cells. When dragging a column, because it creates a new table for each header, the border gets replicated.

Here's an example: http://screencast.com/t/ehwLYAlyAiji

In my application, it's more than just a cosmetic thing, because the width of the additional borders causes the last column header to get bumped down to the next line, which throws everything off.

I think I could solve this with some css if I had a good way of targeting the tables. I could do ul table, but I'd prefer something more specific. Maybe you could add a class on to the auto-generated tables so I could style them specifically?

After a column is dropped I need to call a custom API that stores the new order. I need to get a handle on the column heading just dropped because it has data attributes with data I need to send. Looks like the persistState function just has a handle on the table.

Is there anyway to know which heading was just dropped within the table and get a handle on that?

Glad I found this plugin. Does just about everything I need it to do.

Thanks!

Anchor link not works in heading

First time it works fine, second time it actually throws the following:

Uncaught Error: cannot call methods on dragtable prior to initialization; attempted to call method 'redraw'jquery.js:3 n.extend.errorjquery-ui.js:6 (anonymous function)jquery.js:3 n.extend.eachjquery.js:3 n.fn.n.eachjquery-ui.js:6 e.fn.(anonymous function)

Any help be greatly appreciated, think its not destroying the components properly from what I can tell, great widget otherwise

Would it be possible to ignore a top header row, I use a table with a wide header row and it isn't working well with this dragtable.

Best regards
eslin

seems ng-repeat (dynamic) rows and dragtable cannot work together :(

any suggestions?....

if i got one - i will say 🎱

Hi @akottr
I'm using this lib, it's use full for me Thanks 👍

I'm storing table column orders as per the users to show their preference, for this kind of task this plug in works Amazing

Actually I am using Bootstrap theme in My application. The plug in uses jQuery UI it looks bit odd.

Do You have a plane to make this plug-in with Bootstrap?

Hi,

Is it possible to detect end drag event ?
I wan't to call javascript function at the end.

Thanks

Dragtable is not working properly when there is a hidden th or td in the table. Can you please provide a fix in the plugin where while dragging it does not take the offset of hidden th and showing a white space. Below is the sample html code. Please provide a fix for this.

    <tbody>
      <tr>
        <td>12:10:01 AM</td><td>0.04</td><td style="display:none">test</td><td>28.86</td><td>0.08</td><td>1.65</td><td>69.36</td>
      </tr>
      <tr>
        <td>12:20:01 AM</td><td>0.00</td><td style="display:none">test</td><td>26.54</td><td>0.08</td><td>1.64</td><td>71.74</td>

      </tr>
      <tr>
        <td>12:30:01 AM</td><td>0.00</td><td style="display:none">test</td><td>29.73</td><td>0.09</td><td>1.66</td><td>68.52</td>
      </tr>
    </tbody>
  </table>

Hi Akottr,

Great plugin and many thanks for hard-work you have put into such a wonderful plugin. Please can you help me get this working in touch devices. I already tried using jquery touch-punch but no luck though ui-draggable works. Secondly I'm using this plugin in angularjs and I have some columns those are hidden and only 3 columns are visible at a time. Please can you help me contain drag to 3 columns only.

Thanks
Parteek

Hello,

I'm having problems with state saving after ordering table columns and refreshing the page. I've tried your sample code to accomplish this task but, still no success...

Yet, i can make a suggestion. State saving option should be defined in config so if i wanted a dragtable to save state, i should not be writing extra lines.

Also i'm sending you my sample project. And my current browser is Google Chrome (Version 29.0.1547.66 m). Could you please take a look at it and direct me to the right way?

https://dl.dropboxusercontent.com/u/24579227/draggable-state.rar

Thank you in advance.

Just curious of this project is dead?

Recently i have used bower to install this package, but the bower.json is missing the jquery.ui dependency

Hi,

I have managed to use the ajax function to save a state to my database.

Now I am trying to re-load it and I am getting an error. This is what the page mark up looks like:

restoreState: {"general_ledger_trans_vw_id":"2","gl_account":"1","CC_Desc":"4","AC_Desc":"3","PJ_Desc":"5","journal_header_id":"6"}
});

and the error I get in the console is TypeError: b is undefined, which is coming from swapNodes function, which is being called in the _bubbleCols function, line 145.

Prior to adding the restoreState option, the table was working fine. I can comment out the restoreState item and the dragging works, using a handle and sending ajax data.

Any thoughts on what is happening here?

What exactly are the dependencies of this widget? And would you please include a list in the readme.

• jQuery
• jQuery UI
  • Core
  • Widget
  • Mouse
  • Sortable

Am I missing something from the above list?

Included current versions of jQuery as:

<script
              src="https://code.jquery.com/jquery-3.0.0.min.js"
              integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
              crossorigin="anonymous"></script>
<script
              src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
              integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
              crossorigin="anonymous"></script>
<script src="dragtable-2.0.12/jquery.dragtable.js"></script>

I got exceptions that 'size()' was not a function. I replaced all instances of 'size()' with 'length'; 'size()' seems to have been deprecated as of jQuery 1.8 (https://api.jquery.com/size/)

I included the stylesheet:

`

I got an error saying that 'alpha(' was an unexpected token in this:

.ui-sortable-helper { opacity: 0.7;filter: alpha(opacity=70);
`}

I replaced it with:
.ui-sortable-helper { opacity: 0.7;filter: opacity(70);
`}

I think that was the intention

Hello,

I've used your plugin for a big table which contains a lot of columns. As you may have guessed, horizontal scrollbar gets visible to display all the columns. But my problem is after scrolling the page horizontally, plugin works but while dragging a column, it behaves like i've not scrolled. It displays the draggable object in the wrong place and i've noticed that scrolling mixes up the columns i've been dragging.

I've reproduced a sample project (just a thin clone of my project actually). But you can notice that the reordering of columns are mulfunctioning when table container is scrolled.

Thank you for your patience and interest.

Link: http://db.tt/f5ga8ynf

Hi,

In our HTML TABLE, there is a TFOOT with TH cell.
When we're moving column, the column resizing is wrong.

Look at in _rearrangeTableBackroundProcessing: function():

this.sortableTable.el.find('th').each(function(i, v) {
var _this = $(this);
if (widthArr[i] > _this.width()) {
_this.css({
'width': widthArr[i]
});
}
});

Tab widthArr contains all TH cell's width but not in the same order than the result of this.sortableTable.el.find('th').

DoD

$('#handlerTable').dragtable({dragHandle:'.some-handle'}); ->I can see error 500 when i use this
$('#handlerTable').dragtable(dragHandle:'.some-handle'); -> I can see error context 'syntaxerror missing ) after argument list jquery'

please help me I really like yours

Thank you

doen't work properly on RTL tables

Hi @akottr
I have using Your Js Library in my application(like store the dragable column value to DB for each user and also when particular user login means it'll be fetching table column order in DB) and it's awesome 👍 💯

Do You have any updates like table column filtering? for Your reference below I have added the image,

Hi Experts.
Is there any event for detecting dragtable drag ends?
Or in Which line of code in source the drag ends?
I Want to call some java script function on drag ends
please help me

Hi, it's possible to make it work without jquery Ui I'm using bootstrap and it doesn't work alongside jquery UI

Steps to reproduce:

1. create a table
2. set margin-top: 50px
3. make the table draggable

Result:
The grey area is larger than the table.

Expected result:
The grey area should be the same size as the table.

jQuery draggable supports a very nice feature to drag only by the horizontal axis. Is it possible with this plugin?

I have a tfoot with a colspan and the dragtable is behaving very weird .. the columns go underneath each other and rows are swapping too

I am attempting to implement drag-table in my application.

I have injected 'Dragtable' into my application and included the following scripts

angular-dragtable.js
jquery-3.1.1.js
angular-1.5.5.js

along with the jquery-ui files core.js and widget.js (did not find mouse or sortable in my distribution.

This is in my view

<thead>
	<tr>
		<th drag-me drop-me>One</th>
		<th drag-me drop-me>Two</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>this</td>
		<td>that</td>
	</tr>
	<tr>
		<td>some</td>
		<td>another</td>
	</tr>
</tbody>

which renders like this on page load:

Hovering over a table header gives me the drag cursor but when I drag column One to the right and drop it past column Two I see this:

And attempting this move a second time results in this:

Any help appreciated!