Jquery – TreeTable jQuery Plugin used inside html table

jqueryjquery-plugins

I'm having issues with using the treeTable jquery plugin (http://plugins.jquery.com/project/treeTable) inside an html table. It seems that if I try to drag and drop and item my table goes away. My treeTable is within another html table

i.e.,

It looks like it sets all of the parents TR's to be droppable.

Example 4.3 (in the plugin documentation) is very similar to what I'm using but within another html table/tr.

Best Answer

Actually I just fixed this issue.

I realized that within the treeTable code I was using it was using the "parents" function and since there were tr's above it was assuming they were drop-able. I added a not(.ignoreForDroppable) for the tr (as shown below) to ignore the tr's outside of my tree table (and added the class ignoreForDroppable to those tr's). This way those tr's will not be drop-able.

// Configure droppable rows
$("#dnd-example .folder").each(function() {
  $(this).parents("tr:not(.ignoreForDroppable)")).droppable({
    accept: ".file, .folder",
    drop: function(e, ui) { 
      // Call jQuery treeTable plugin to move the branch
      $($(ui.draggable).parents("tr:not(.ignoreForDroppable)")).appendBranchTo(this);
    },
    hoverClass: "accept",
    over: function(e, ui) {
      // Make the droppable branch expand when a draggable node is moved over it.
      if(this.id != $(ui.draggable.parents("tr")[0]).id && !$(this).is(".expanded")) {
        $(this).expand();
      }
    }
  });
});