Ikanobori Weblog

As an avid fan of jQuery (however, not using it too much) I’ve encountered a problem I really need to solve. I am writing this post in the hopes that some of the jQuery community will pick up on this as I think it is a problem a lot of jQuery developers will need to solve one time or another time.

I will start by describing my problem. The problem concerns a large tree which is foldable, by a large tree I am talking about about 200 main nodes with each of them ≈ 5 subnodes with each subnode an arbitrary number of pages or other subnodes.

We load the sublevels using AJAX. This works fine. The tree at first is generated from XML using XSL and the outputted HTML looks like this:

<ul class="vline">
  <li class="sep">&nbsp;</li>
  <li id="C697EDFA-1517-64D9-CCE728FA69AABB13" class="open">
    <div class="toggle">&nbsp;</div>
    <div class="label">
      <a href="#">Loret Ipsum</a>
    </div>
    <div class="active"><a href="#">nl</a></div>
    <ul class="vline">
      <li class="sep">&nbsp;</li>
      <li class="closed" id="C697EE29-1517-64D9-CC87AC418D9DF2E4">
        <div class="toggle">&nbsp;</div>
        <div class="label">
          <a href="#">Dolor sit amet</a>
        </div>
      </li>
      <li class="sep">&nbsp;</li>
      <li class="closed" id="C697EE29-1517-64D9-CC87AC418D9DF2E4">
        <div class="toggle">&nbsp;</div>
        <div class="label">
          <a href="#">Nunc est amet</a>
        </div>
      </li>
      <li class="sep">&nbsp;</li>
    </ul>
  </li>
  <li class="sep">&nbsp;</li>
</ul>

This generates a nice list. I then use selectors to make certain parts droppable (‘li a’), (‘.sep’) and certain parts draggable (‘li’). This works fine with the default jQuery draggable/droppable. However, the default draggable/droppable is painstakingly slow. It looks like it recalculates all droptargets’ positions the moment you start dragging. This causes a 1 to 2 second delay on the MacBook Pro I am developing on, I don’t even dare to think about the slower cpu’s used by clients and visitors.

The drop targets need to be recalculated because a user can fold/unfold nodes to their liking. If you do not update the drop targets then a folded tree will give funny results because the targets below the folded node have changed position.

So I ventured out to start recalculating drop targets when I fold or unfold a node. This causes a delay in the folding/unfolding in which I can show a nice AJAXish loading image which looks good to the user and obfuscates the amount of calculations being done in the background.

What I have tried to get this behaviour:

• First I started fiddling with a plugin called jquery.event.drop and rebinding the droppable event when a node folds/unfolds. This is to no avail.
• Second I updated my jQuery to 1.3 to use live events, this did not help but did break a lot of other existing jQuery code.

I know the plugin jquery.event.drop has a setup() method which uses it’s built in method locate() to calculate all drop targets. However I just can not seem to find out how to call this setup() function again.

Is this just impossible in jQuery and should I build it from scratch or is there some nifty way of doing this which I am totally overlooking?

Also, a little excerpt from the javascript I am using right now:

function create_drop_targets() {
  $('li a')
    .bind('dropstart', function(event) {
    })
    .bind('drop', function(event) {
    })
    .bind('dropend', function(event) {
    });
}