Search code examples
javascriptjqueryfancytree

Fancytree. How to limit dragging possibilities?

I'm going to use fancytree for creating/editing menu categories of goods. I am using nested sets principle in my DB (MySQL). If to say by words of this principle, I need to limit dragging by the following way. I want leaves could be placed only to the levels where are only leaves. In other words, I want elements that have no children could be placed only to level where there are the same elements, that have no children elements. If target level has at least one element that has children, I want to forbid such dragging. How can I do that?

Solution

  • Nutshell: drag, and drop, eligibility are determined by the dragStart and dragEnter functions passed in to the dnd extension startup options:

    The DnD extension docs sum it up with code; some details elided below:

    dragStart: function (node, data) {
  // Return false to cancel dragging of node.
  // if( node.isFolder() ) { return false; }

  return true;
},

dragEnter: function (node, data) {
  // Return false to disallow dropping on node.
  // E.g., Prevent dropping a parent below another parent (only sort
  // nodes under the same parent):
  // if (node.parent !== data.otherNode.parent) {
  //   return false;
  // }

  // Don't allow dropping *over* a node (would create a child). Just
  // allow changing the order:
  // return ["before", "after"];

  // Accept everything:
  return true;
},

    I can't quite make out your business logic, but it seems like you just need to check some combination of the current and target node child properties. I might consider putting that data into the FancytreeNode object to avoid recalculating all the time.