isocra / tablednd Goto Github PK

Is there a way for me to know where from the row was dragged?

I can get the current with $(row).index, the rows I am inserting in between but I don't know how to figure where that row that I am dragging was before.

Hi

TableDnD doesn't happen to have a live event like the general jQuery live() does it?
I'm adding new rows to my table and I need to find a way to allow dragging on the new elements.

Thanks in advance

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

using ver. 0.7 on Chromium 24

Bower probably won't be around for long anymore. Even the Bower team is recommending developers to move over to Yarn. Would it therefore be possible to register this package on NPM or Yarn?

See:
https://docs.npmjs.com/getting-started/publishing-npm-packages
https://yarnpkg.com/lang/en/docs/publishing-a-package/

Hi,
I'm getting this issue "Uncaught TypeError: Object [object Object] has no method 'tableDnD' "

My code is

$("#table_id").tableDnD({
onDragClass: "tDnD_whileDrag",
onDrop: function(table, row) {
params=$.tableDnD.serialize();
$.ajax({
type: "GET",
url: "{{$rootPath}}aj_request.php?p=admin.save_event_order",
data: params,
success: function(data) {
}
});
}
});

When I using the TableDnD in a mobile webpage, if the table was in position which need scroll down. After I try to drag(Or even just touchstart) the table.The page will automatic scroll up...
Anyone face same problem with me?

How can I get the code of previous version(0.5)

Hello,

I have to add rows on a table wich can be reordered and I use your plugin for that, it seems that the new rows doesn't have event on the dragHandle cells because of the initialisation in makeDraggable() :

var cells = jQuery(table.tableDnDConfig.dragHandle, table);
cells.each(function() {
(...)

...it's better to use a delegate() call :

table.delegate(table.tableDnDConfig.dragHandle, startEvent, function(){
(...)
})

...you can have details here : http://api.jquery.com/delegate/

It seems that the example on your webpage doesn't work as well :

$('#table-5').tableDnD({
onDrop: function(table, row) {
alert($('#table-5').tableDnDSerialize());
},
dragHandle: "dragHandle"
});

...in my version of makeDraggable(), the dragHandle option is used as a selector not a classname, so the correct value is ".dragHandle" and not "dragHandle".

Best regards,
Cédric Tailly

http://ark.intel.com/compare/65524,65523,65719
On this page it can drag a list of td to somewhere else
not just tr
so cound you add this, I boss want this effect,
Really hard for me to do it

I'm listening for the click event on my TRs..
dragging is a mouseDown followed by a mouseUp. (fires a click event)
I need the ability to to stop the event propagation from the onDrop handler

Hi,

first of all thank you for TableDnD it's awesome and fast, but I still miss one feautre which would help me a lot in my special case. I have searched now almost all search engines and read a lot of approaches with no success.

What is my problem:

I have a "table". After that I defined a header "thead" and in there I defined my "th". Within tablednd this is not drag or dropable. After that I have a php foreach loop which reads all of my data and writes it into my "tbody" and creates more rows "tr" and so on... The rows can be dragged and dropped easily and very smoothly. But my problem is - I want to drag and drop the current row and the next row together - i can easily give them a unique group tag if necessary.

Additionally I don't want to use nested tables, because I loose the alignment of the columns header!

So far here is my simple code - Is it possible to move both tr's with ID 25 or ID 26?

<table id="myTableToSort_1">
      <thead class="header nodrop">
        <th name="aaa">AAA</th>
        <th name="bbb">BBB</th>
        <th name="ccc">CCC</th>
        <th name="ddd">DDD</th>
      </thead>  
      <tbody>
        <tr id="25">
            <td>values for row 25</td>
            <td>values for row 25</td>
            <td>values for  row 25</td>
            <td>values for  row 25</td>
        </tr>
        <tr id="25">
            <td colspan="4">this row belongs to row 25 and should be moved with row 25</td>
        </tr>
        <tr id="26">
            <td>values for row 26</td>
            <td>values for row 26</td>
            <td>values for row 26</td>
            <td>values for row 26</td>
        </tr>
        <tr id="26">
            <td colspan="4">this row belongs to row 26 and should be moved with row 26</td>
        </tr>
      </tbody>
</table>

Many thanks in advance. Hope someone can help me.

Best Regards
Aaren

Following is my query.

I am using table dnd js for sorting the rows of my table. When table structure is simple, it works perfectly. But is there a way to group two (or perhaps more) rows and move them together? To do this, i am using nested table structure, below is the html.

And script is

But this is not working. Infact using span tag instead of nested table does not work.Please help what i am missing here.

Thanks

http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/

In FF 35 on drag start there is JS error:

ReferenceError: event is not defined
if (event.changedTouches)

Thank you!

Hello!

I know the whole idea of the plugin is to drag and drop on a table, but additionally to these i would like to add some buttons on each row of my table to change the order of a row.

Basically an arrow up and down in each row, click one of the arrows put the row one position above or belove, so i was wondering if there is any way to trigger this change with a button using your plugin

Thanks!

http://stackoverflow.com/questions/26431265/when-tablednd-is-disabled-it-leaves-residual-css-and-i-cant-clear-the-css

When I remove tableDnD from my HTML table the CSS is not cleared and I am unable to select rows. It's not exactly a bug that you can't select rows, the nature of drag and drop will cause conflictions with any click event. However, I am trying to be able to toggle all of the tableDnD (wonderful) behaviour with jQuery, and wanted to bring attention to my stack overflow question.

Hello,

In documentation, you are writing

$("...").tableDnDSerialize()
 * Will serialize and return the serialized string as above, but for each of the matching tables--so it can be
 * called from anywhere and isn't dependent on the currentTable being set up correctly before calling

but I'm not able to get it work like this in jQuery 1.9 (The error message is "TypeError: table is null") and it doesn't even match source code. tableDnDSerialize is implemented like $.proxy($.tableDnD.serialize, $.tableDnD) and I don't see how can that preserve current "this", much less put it into currentTable where serialize is searching for it.

(Actually, I get it work by setting currentTable manually before calling it, but that doesn't look nice.)

Hi, thanks for the great plugin! I am getting redundant data from serialize() - it gives me empty field if the has no id (i.e. nodrag ones) so I have to unset it serverside.

Little if clause to line 301 would fix it, wouldn't it?

Hello,

is there a way to group two (or perhaps more) rows and move them together?
I have to sort a list of users and each user-entry consists of two rows: the user itself and some data in the first and then a comment in the second (the comment spans over all the cols from the first row).

It would be great if there can be specified an attribute (such as data-group or something like this) to bind two ore more rows together.

Hello,

I have a laptop with a touchscreen, and cannot use the mouse to sort the tables.

I am getting by by setting hasTouch = false in the js file until it can be fixed.

I use jqgrid,jquery and tableDnd to work for a project.But the Chrome remind me a error ,it's "Uncaught TypeError: Cannot read property 'offsetParent' of null".
Please tell me something about this problem and how to solve it.Thanks!!

I use jqgrid,jquery and tableDnd to work for a project.But the Chrome remind me a error ,it's "Uncaught TypeError: Cannot read property 'offsetParent' of null".
Please tell me something about this problem and how to solve it.Thanks!!

Please help me on below issue:

When I click and move over table row, the text is selected and no moving happens.

On this line: https://github.com/isocra/TableDnD/blob/master/js/jquery.tablednd.js#L614 we're checking for the existence of the table's id. I don't think this should be necessary unless serializeParamName isn't set as otherwise the table id isn't required.

What do you think?

In the mouseup function on line 357 in the newest version the jQuery.tableDnD.originalOrder newOrder always have the same value, so something is not correct in jQuery.tableDnD.serialize().

If I comment out that check, the code works fine.

Running jQuery 3.1.1 with tableDnD. Replicated on both a real device and in the Android Studio emulator (both Nougat). Once I hooked in with Chrome Dev Tools to the emulator, I get (in the unminified file):

jquery.tablednd.js:95 Uncaught TypeError: Cannot set property 'touchstart' of undefined

The exception causes tableDnD to fail to load. The culprit:

// If we're on a touch device, then wire up the events
// see http://stackoverflow.com/a/8456194/1316086
hasTouch
    && $.each("touchstart touchmove touchend".split(" "), function(i, name) {
        $.event.fixHooks[name] = $.event.mouseHooks;   // <-- Line 95.
    });

The quick solution seems to be, with newer jQuery, to comment out/remove those lines of code. The plugin starts functioning as expected without any errors. A better solution could be to put a try-catch around the line causing the problem so older jQuery continues to work and the exception is then caught and ignored under newer jQuery. This seems to work okay:

// If we're on a touch device, then wire up the events
// see http://stackoverflow.com/a/8456194/1316086
hasTouch
    && $.each("touchstart touchmove touchend".split(" "), function(i, name) {
        try { $.event.fixHooks[name] = $.event.mouseHooks; } catch(e) { }
    });

Each time I reorder a row, I get this error

I recently found that tableDnD would not work with hammer.js also enabled as it modifies the properties of the event we rely upon for drag and drop implementation.

This poses an issue that needs to be addressed but perhaps considering hammer as a dependency instead would be a more favourable option which would minimize our own adaptation for gesture implementation and widen our overall device compatibility while supporting a project which has taken this task on themselves at the same time.

Alternatively we would still have to consider the presence of hammer which becomes a messy proposition.

@isocra The former sounds like win win to me, any thoughts, concerns and suggestions?

Hi!

The code is not working at all when used on an xhtml page with application/xhtml+xml mime type.
Its working smoothly on pages, that served as text/html though! Great job!

makeDraggable adds "cursor: move;" if nodrag is not present, but it doesn't remove it if nodrag is present. My use case: I use javascript to add and remove nodrag as needed, then I call tableDnDUpdate(). I expected tableDnDUpdate() to remove the style but it didn't.

This is how I fixed it (I added the else):

            // Iterate through each row, the row is bound to "this"
            if (!$(this).hasClass("nodrag")) {
                $(this).bind(startEvent, function(e) {
                    if (e.target.tagName == "TD") {
                        $.tableDnD.initialiseDrag(this, table, this, e, config);
                        return false;
                    }
                }).css("cursor", "move"); // Store the tableDnD object
            } else {
                $(this).css("cursor", "");
            }

processMouseup throws an exception (Uncaught TypeError: Cannot read property 'tableDnDConfig' of null) if I try to drag an element off the table. This was also an easy fix:

processMouseup: function() {
    var droppedRow  = this.dragObject,
        parentLevel = 0,
        myLevel     = 0;

    if (!this.currentTable || !droppedRow)
        return null;

    var config = this.currentTable.tableDnDConfig;

Hi
Is it possible to set a drag boundary ?
So you can't drag past that boundary?

Thanks

Hi @isocra

I use this plugin to reorder a table containing checkboxes that is submitted.

The reordering works but when submitting the form, the received elements have still original order, any idea?

Thank you for this awesome plugin,

Gauthier

Is there a way by which i can exclude some rows from being dragable? i tried adding classes nodrag. But that doesnt seem to help

I notice that someone asked a similar question but I feel that what I required isn't quite the same.

I would like to group and move them in bulk perhaps by giving them the same class or putting them inside a . For example:

ID Name Parent
1 Hello 0
2 Hi 1
3 What 0

Where 1 and 2 are related and will be moved together, otherwise it completely messes up the ordering of the table.

This https://github.com/Istergul/jquery-table-multi-dnd claims it possible but I don't want to use checkboxes to select the multiple rows (it will be evident from the parent if they're grouped or not) and I also don't want to split from the main development :)

Drag/Drop won't work at all in Chrome on Windows 10. Edge works fine.

Any ideas on how to get this working on Chrome?

Hi All,
This plugin is nice to use.
I want to detect mouse dragging direction for the purpose of updating position.
Please help on this.

Hello,
is there a way to use this great plugin in nested tables ?
e.g.: I have one big table that contains other tables in her own cells...
Row of little tables in cell should be draggable, but also the rows of the big table should be draggable ...
At the moment it doesn't works, throwing an exception like:
NotFoundError: Node was not found

Thank you for any suggestion !!

Hi there - I'm not sure why, but the onDrop method is triggered even when I only click on the table row. Is that normal? I'm using Firefox.

Any plans on making this work on iPad/Android tablets?

Since in html ids should start with a letter the usage of this attribute for storing the id of the row results in a invalid html.

It's also a problem when you have two tables on one site which shold be sortable. Because ids should be unique and both tables could have the same ids in their rows.

So, my ideas to solve this problem are:

Adding a prefix to the id like: "sortid1". The prefix should be customizable so you can sort two ore more tables on one page without getting duplicated ids.

Anotheridea is to use another attribute for the id like the new HTML5 "data-......" attribute or even the "class" attribute. When there is a prefix for the id you can extract it from the class attribute even if the row has many classes.

My users that use Win 8.1 are complaining that while they can see the 4 pointed arrow, they are not able to drag and drop rows in tables. The tables are used to contain meeting agendas, and the ability to reorder rows in the agenda is important.

Using jquery 1.11.1, jquery ui 1.9.2 and latest tablednd with the hasTouch pull request code included.
I load TableDnD before jQuery UI as I have found in the past, I run into issue if I load it after jQuery UI. I know jQuery UI has a drag and drop and sortables in it; however, I am not the original developer on this project, so I do not know what the thinking was at the time when this was implemented.

Some research via Google that may be helpful:

https://www.google.com/search?q=no+drag+and+drop+in+windows+8&oq=no+drag+and+drop+in+win&gs_l=serp.1.1.0i22i30l4j0i22i10i30j0i22i30l5.3352.4617.0.8819.6.6.0.0.0.1.172.775.2j4.6.0....0...1c.1.58.serp..1.5.632.n_QMrQ7KHzQ
http://forum.thewindowsclub.com/windows-8-management-support/34278-weird-windows-8-drag-drop-problem-can-t-drag-drop-files-folders.html
http://www.eightforums.com/general-support/15434-drag-drop-problem.html
http://www.mladengradev.com/en/how-to-get-back-drag-and-drop-in-windows-8/
http://windowssecrets.com/forums/showthread.php/157532-Drag-and-drop-not-working-anymore-after-an-upgrade-to-Win-8-1
http://www.cassinicloud.com.au/blog/how-to-re-enable-drag-and-drop-in-windows-8/

Is there any way to allow addtional text in a 'td' to be styled AND movable
I have a sub title separated with p tag - but when I click and move over that, the text is selected and no moving happens.
All I'm trying to do is restyle part of the text within the tr td p structure.

Theres comments on SO (re other plugins) to do:
ev.originalEvent.preventDefault();
but no dice ...

When the dragHandle is set to a TD element, it becomes the one that is getting passed in the function(table, row) callback. Not sure that this behavior is wanted. I would prefer getting the TR element as it is easier to find it afterwards inside the table.tBodies[0].rows collection.

Hello there,

I have been using the plugin from a while in my code. I have a requirement as below:

I will have N number of rows and each one of them will have a hidden row which needs to be shown on some action.

The issue if i wrote the rows separately was the drag and drop was working fine but when the user clicks on the action, the hidden row is being shown in different place.

To fix this issue, i have kept the hidden row in a TD element of the row on which I'm applying the DND CSS. Now when i click on the action, the hidden row displayed in appropriate position but i cannot enter text into any of the input fields which are there.

Any help ASAP is appreciated! Thanks,

I Use:

• jquery: http://code.jquery.com/jquery-git.js
• TableDND: 0.7 (none min. version)

if i drag it throws an Error on jquery-git.js Line 5440

cur is null
} while ( cur.nodeType !== 1 );

any Idea? is it a jquery or a Plugin problem?

PS: it works fine with jquery 1.72 (http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js)

The problem is in title. Tables are creating and removing dynamically, of course I initialize tableDnD for each. All is working excellent only when there's only one table. When two or more, I see "Uncaught TypeError: Cannot read property 'length' of undefined" message. This is error trace:
map @ jquery-2.1.4.min.js:2
currentOrder @ jquery.tablednd.min.js:264
initialiseDrag @ jquery.tablednd.min.js:272
(anonymous function) @ jquery.tablednd.min.js:242
dispatch @ jquery-2.1.4.min.js:3
r.handle @ jquery-2.1.4.min.js:3

Does not seem to work in Chrome or Firefox. Any clues?

On Tablet and desktop drag and drop seem working anymore. Ok with the others browsers . CSS issues ? Many thanks for the great job

Hi there, with reference to this:

#30

One of our customers is having this issue and I've witnessed it on their computer via remote support. Dragging the draggable item just results in the image trying to be dragged around (as in the default behaviour when one drags something that isn't draggable in these browsers). It works fine in Internet Explorer though.

I have a test machine running Windows 7 Enterprise and it works fine in Firefox 22 and Chrome.

The biggest problem is that, looking at the console, there are no error messages at all. I tried in Firefox's default console and also with Firebug.

The customer reports that it also doesn't work on her work machine. The home machine is running Windows 7 Home Premium with SP1.

Any troubleshooting tips would be greatly appreciated. I've already tried disabling addons and reinstalling the browser (Firefox).

JasonGhent@2f14b55

This is only a fork of the stable release, and does not apply to anything >0.4. If there is no interest, please close this issue.

Hello, it's possible to tag your project ?

Bower works with version number. In your case, the bower JSON save only an * version because you have'nt tagged your project.

The only one solution to update your library is to remove folder and relaunch bower install command. Please fix that