Get updates

Scott Scriptaculous Sortable Drag and Drop Tree Fix

While Scripty2 looks great, drag and drop is still in development and I’m continuing to work with Sortables in Scriptaculous for the time being.

I’ve uncovered what looks like a drag and drop tree bug, and in this post I’ll go over the code to fix it.

If you’re just using basic drag and drop, like a Sortable that doesn’t nest items in a tree structure, you can safely ignore this.

The problem I was experiencing cropped up with a Sortable tree, using LIs and OLs, where I couldn’t drop an LI onto an empty OL element. Once the OL had at least one child LI I could drop on top of that no problem, it was just the empty case that gave me trouble.

With a little debugging I traced the problem back to Sortable.create and the fact that it does not set .tree in options_for_tree, though this property does get set in options_for_droppable. Without .tree being true, Droppables.isContained uses the wrong element for comparison, and flunks the OL (“tree”) elements as drop targets.

If you prefer to edit the library itself you can change options_for_tree in Sortable.create to:

var options_for_tree = {
  tree: options.tree,
  onHover: Sortable.onEmptyHover,
  overlap: options.overlap,
  containment: options.containment,
  hoverclass: options.hoverclass

However I prefer to keep monkeypatches to libraries in a separate file so I can keep track of them easily. Monkeypatching Sortable.create would be obnoxious as it’s a large function… but Droppables.isContained is much more reasonable and a small change there can have the same effect:

  isContained: function(element, drop)
    var containmentNode;
    if(drop.tree) {
    containmentNode = element.treeNode;
    } else {
    containmentNode = element.parentNode;

    var containmentNode = element.treeNode || element.parentNode;
    return drop._containers.detect(function (c) { return containmentNode == c; });

As .treeNode is only set when options.tree is true this works just fine.

…And there you have it. Enjoy Scriptaculous!

One Response to “Scriptaculous Sortable Drag and Drop Tree Fix”

  1. anca Says:

    Thanks a lot, you just saved me from re-debugging this thing on my own (or working around it with a dummy element), I greatly appreciate sharing this.

Leave a Reply