Infusion 0.5 - Reorderer problem

[antranig at caret.cam.ac.uk]

OK - I think this gives the clue to what the issue is. My guess is that
when you perform an "interior clone" using this line
>   div.innerHTML = el.innerHTML;
what you end up doing is also cloning the node you have as the grab
handle, complete with its id. This creates a (theoretically invalid)
document with two elements with the same id, so the jQuery search for
the handle then becomes "lost". Our new avatar generation code works
quite hard to "cleanse" the material inside the moving element
(in particular destroying all id attributes) so that the avatar
generated from it causes as few problems as possible. Still I worry
about this strategy as being a bit "heavyweight" and I guess it would
be better in general for users to make "simple" avatar strategies
of their own for example to just show a titlebar in the right
colours plus a rectangle etc. for performance reasons. However as
you say the current avatar generator doesn't perform too badly any
more, considering what it does.

If you want to go back to your avatar generation, my suggestion is
that you either similarly cleanse the copied node of its ids, or
else move towards class-based rather than id-based detection for
the grab handle. We will try to improve the error semantics for
the next release so that these kinds of problems are easier to
detect :P

Cheers,
A.

Quoting nicolaas.matthijs at caret.cam.ac.uk:

> This is the code I use:
>
> ======================
>
> var grabHandleFinder, createAvatar, options;
>
> grabHandleFinder = function(item){
>   return jQuery("[id=draghandle_" + item.id + "]");
> };
>
> createAvatar = function(el){
>   var div = document.createElement("div");
>   var element = $(el);
>   div.style.width = element.width() + "px";
>   div.style.height = element.height() + "px";
>   div.innerHTML = el.innerHTML;
>   div.style.backgroundColor = "#EEEEEE";
>   div.className = "widget_dragging";
>   return div;
> };
>
> options = {
>   styles:  {
>     mouseDrag: "orderable-mouse-drag",
>     dropMarker: "orderable-drop-marker-box",
>     avatar: "orderable-avatar-clone"
>   },
>   selectors: {
>     columns: ".groupWrapper",
>     modules: ".widget1",
>     grabHandle: grabHandleFinder,
>   },
>   listeners: {
>     afterMove: saveState
>   },
>   avatarCreator: createAvatar
> };
>
> fluid.reorderLayout("#widgetscontainer", options);
>
> ======================
>
> Interestingly, if I remove 'avatarCreator: createAvatar' from the options
> and use the default avatar creator, everything works fine. (And it has
> improved quite a lot, congratulations !). For me, the default one is just
> fine, so I'm no longer blocked.


----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.