I would like to react on drag table changes in my custom js code.
However tabledrag.js hides everything in a private "self" variable.

jQuery offers different solutions for this.
Imho the best one would be to trigger a custom event:

      $(self.table).trigger('tableDragChanged', self);

This would allow to hook into the change event:

      $("table").bind('tableDragChanged', function(self){
          alert('Change Event')
      });

Trigger is part of jQuery since jQuery 1.0
http://api.jquery.com/trigger/

CommentFileSizeAuthor
tabledrag_javascript_hook.patch510 bytesjantimon

Comments

ygerasimov’s picture

ygerasimov commented
Status: Needs review » Needs work

Very useful change. Big + on this.

+++ b/misc/tabledrag.jsundefined
@@ -538,6 +538,9 @@ Drupal.tableDrag.prototype.dropRow = function (event, self) {
+
+      // Allow module writers to hook into the change event:
+      $(self.table).trigger('tableDragChanged', self);
     }
 
     if (self.indentEnabled) {

I would change comment to simpler "Allows to hook into the change event."

As usecase we would be able to ajaxify draggable table as we would be able to submit form after dragging change has been done.

-25 days to next Drupal core point release.

nod_’s picture

nod_
Primary language French
Location Lille
commented

Hook into the change event won't make much sense to JS devs, it's an event and it allow module writers to react to, listen to or catch the change event.

I agree that's very useful and it doesn't look like there is anything we can use that's already in the code to easily do the same thing. While we're here why not add the same kind of events jQuery gives for his widgets: dragstart, drag, dragend.

Pushing a little, jQuery UI has a draggable utility that could be use to reduce the code from tabledrag.js, just sayin' :-°

nod_’s picture

nod_
Primary language French
Location Lille
commented

Just found #822062: Refactor tabledrag.js so it uses jquery.ui.draggable.js

jantimon’s picture

jantimon commented

@nod_ I totally agree.
As Drupal uses jQuery now we should try to reduce code duplications.
However the ticket you mentioned is for Drupal 8 and this issue is already a half year old.
So I guess in the long term we should go with #822062: Refactor tabledrag.js so it uses jquery.ui.draggable.js but for now this patch would help.

nod_’s picture

nod_
Primary language French
Location Lille
commented

6 months is not that old, and I don't think they'll go the easy way instead of the right one as long as there is no bug involved.

You should close this one as a duplicate of the other and help do that properly over there :)

jantimon’s picture

jantimon commented

"6 month is not that old" - that's exactly the reason why I don't like to contribute.
It's only time consuming and frustrating - I am using the patch above and if it is not applied
that's fine.
This one line of code would help module writers to create fancy ajax stuff but I guess the "#822062: Refactor tabledrag.js so it uses jquery.ui.draggable.js" issue
will be ready 2013/2014 anyway so we should just wait till then.

nod_’s picture

nod_
Primary language French
Location Lille
commented

That's the way it goes around here. If you won't help, then yes, it could take a while before it's done. A patch of mine took only a couple of weeks to get in because it was making performance improvement, it wasn't adding a feature.

It all depend on the kind of patch we're talking about. I'm pretty sure if the other issue had a working and clean patch it'll get in in no time.

barry_fisher’s picture

barry_fisher commented

Thanks @Merco for this patch. I've used it on a D7 install and works perfectly for my usage.

aaronschachter’s picture

aaronschachter commented

same here! thanks!

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs work » Closed (duplicate)

Added a link here in #1524414: Rewrite tabledrag.js to use jQuery UI.

kpv’s picture

kpv commented

works well with D7. thanks a lot