This project forked from akottr/dragtable
re-order table columns by using drag'n'drop
Home Page: http://jebaird.com/blog/dragtable-jquery-ui-widget-re-arrange-table-columns-drag-drop
License: MIT License
If the table contains a tfoot tag, it will be converted into a tbody element in the dragged element.
It should still be a tfoot element.
Hello,
First of all thanks for the plugin, tried a few and right now preferring yours.
I'm with chrome 31.0.1650.63 m and firefox 26.0.
In your code you have a few places that consider scrollLeft property on body (by default) element.
I checked the value of the property.
In firefox always returns 0 (zero) but chrome returns correct value but... when you drag the column it appear positioned properly in firefox not in chrome.
Then in my copy I simply removed all occurrences of scrollLeft and the positioning is fine in all said browsers (including IE 10).
My layout is very simple, the offsetParent for my table is body.
It seems that scrollLeft just unneeded or the calculations that try to take it into account are wrong.
Thank you
add in functionality for touch events on iOS and android.
When I'm dragging on a table wide enough to cause the page to have a hozitontal scroll bar, the position of the column I'm moving has an offset that does not seem to take the visible window into account, and is not at the same position as the cursor.
I can't provide an example this moment as this is on an internal project server that isn't accessible outside my building, but it should be easy to simulate. If you're unable to recreate this, I can produce an example later on.
it'd be neat if there was a quick way to prevent dragging on or before a specified column
I found that when dragging a column, the drag column (the one displayed while dragging) can appear wider (depending on the content of cells) than the original column, which causes confusion.
To keep the same dimensions I added the code below.
Look for this line of code:
self.dragDisplay = $('<div class="dragtable-drag-wrapper"></div>').append(self.dragDisplay);
Below that, add the following:
var cellWidth = this.element.find("tr:first th:eq(" + index + ")").width();
self.dragDisplay.width(cellWidth);
You may have to change th:eq to td:eq if your table has no th elements.
This plugin seems to not work on IE8.
Do you think it is possible to consider to make it compatible?
Thanks
I'm guessing that this plugin is used mostly on datagrids, where clicking on column label usually toggles data rows sorting.
Would it be possible to invoke the dragtable functionality only when there's actually drag action, and on regular click to pass event through to the data sorting anchor?
Thanks.
When the table is in a "position:relative;" container, draggable columns are not positioned correctly.
This is because the dragged element is added to the <body> by default.
So we have to set the "appendTarget" option each time we use dragtable.
This is a recurring issue since css frameworks like bootstrap set position to relative by default on divs.
Demo: http://jsfiddle.net/cjteLv8v/
Hi there,
I have a problem with the cursor and the column moving doesn't match when the table is scrolling right
https://drive.google.com/file/d/1aO7ZywDITJTPeFRnJlduYqtJhufFDNFK/view?usp=sharing
As you can see, my cursor has moved to the right (red box), but the moving position of the column (gray box) is still to the left with a distance that is probably the same as the scroll length.
did anyone experience it too?
When the dir="rtl" for the table, the dragging gives unexpected results.
Hello jebaird. Thanks for your plugin, I've been using it for a while and I really like it.
I noticed that when moving columns inside a twitter bootstrap's accordion component, it leaves a trace of the column you are moving. It moves the column properly, but it doesn't look good. I made a jsfiddle for you to see what I mean: http://jsfiddle.net/g9umse71/3/.
Do you know what's going wrong?
Thank you.
aleco
currently you can drag one column in ie9, but after that you cant drag an other columns
Hello Jesse,
I have a table with fixed header, which is achieved using 'display: block', and upon performing the dragging of a column, the column display gets distorted.
I could send you my project for you to have a look at in a pm.
Regards,
Jacques
It'd be nice if I could
I don't know if anyone else is having this issue. When I apply 'order' to set the order of the columns, it's giving an error in Firefox console. Find screenshot of the error.
Hi,
I need to use the stop event to automatically send an ajax request in order to save my table state.
But the stop event seems to be fired before the dom is cleaned.
Can you add a new "finish" event raised when the dom is cleaned?
Thanks
Hi,
I implemented "Data Sort" on columns when user clicks on the column header, the function will be broken when i apply the dragtable component. How i could delay the drag event for 300-400 ms, it means if user presses the mouse down and hold it for 300ms, it will activate the drag event, otherwise, it could be consider as a mouse click.
My Best,
Hung Tran
When I use a table which have any rowspan and colspan cell, I can't drag and drop column properly.
Your library is so cool. It's simple and smooth. I love it. I hope you can fix this issue soon. Thank s.
Hello,
I need some help from you, I added some anchor tags inside the table columns but the problem is that when i click on them, it doesnt trigger the onclick function or href to go to that url. How can i make that possible? Since i think that whatever I click inside the table, it just takes as column click, not an anchor click or whatever.
Thank you.
Best regards,
Ertan Hasani.
Hi there,
Can you please give demo of all events, how to use?
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
My Smart table has sorting by-default and if I try to implement swapping of cols with this, my table lost sorting as every action on click on col is being taken as Drag/Drop?
Any suggestions :-)
Thanks
Samit
Either the left or right button causes the drag, effectively disabling a right-click for a context menu. Needs to test MouseEvent.button for zero (assuming using the left button to drag).
Would be nice to have a slight delay before drag engages to ignore click events.
Wasn't sure if this was the right venue for feature requests.
See Sencha's impl here for reference:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/group-header-grid.html
Into file jquery.dragtable.js at 87 line
I fixed it this ways
offsetLeft = this.offsetLeft + $(this).parent().offset().left;
Hello, how can i make my first three columns static, so someone cant change their order. They have to stay next to each other.
<table id="usersTable" class="table table-responsive table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Personal Nr</th>
<th>CIty</th>
<th>State</th>
<th>Zip Code</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$('#usersTable').dragtable({
scroll: true
});
$('#usersTable').on('dragtablestop', function (e, ui) {
userTableOrder = ui.order;
});
</script>
What i need right here is that the Name, Surname and Personal Nr should always stay in that order (first, second and third column of the table), and others (City, State, Zip Code) its okay to change the order.
How is that possible?
Thanks in advance.
Hello,
My suggestion is that you fire the Stop event at the very end of _stop method.
In my specific case I was saving the ordering of the columns so I was retrieving it in following way:
var val = [];
$('#mytable th').each(function(){
val.push($(this).attr('data-header'));
});
That is, taking the columns name from data-header attribute.
I discovered that the column I dragged appears twice, first time at its real position and second time at last position.
This situation kind forces me to understand (I'm not against it though) what is going on inside your plugin...
In my copy I rewrote the _stop method (and I gave up for using return value from event handler as stop event should be just stop event, it is final in some sense):
$( document )
.unbind( 'mousemove.' + this.widgetEventPrefix )
.enableSelection()
.css( 'cursor', 'move')
this.dropCol();
this.dragDisplay.remove()
this._eventHelper('stop',e,{});
Thanks
methinks currently line 479:
if( this._eventHelper('breforechange',{}) === false ){should read:
if( this._eventHelper('beforeChange',{}) === false ){thanks for your work and best regards, philip
Might be nice to have
I actually thought this was a feature at first but now think it's a bug.
I've fixed this by changing the following line:
elementOffsetTop = self.element.position().top;
To this:
elementOffsetTop = self.element.offset().top;
"position()" calculates the element position relative to the offset parent,
where "offset()" calculates the element position relative to the document.
I have a table that is sortable but when dragging is enabled it overrides the click event for sort. I have tried stopping propagation with no luck. Is there a way to allow the user to click without initiating a drag?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.