[jQuery] Sluggish Interface Drag & Drop?

[jQuery] Sluggish Interface Drag & Drop?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi,
first of all, I love the Interface library, together with Thickbox it's
one of my favorite plugins (well it's more like a library) around.
Nevertheless I have a little problem with it. I currently am working on
a mockup for calendar (a big one, not a JS date picker) and use the
Interface library to make the Events drag & drop-able. The calendar
itself is a table of 7x5. Each day is represented with one <td>.
If a day has events, then there is also an <ul> element
containing the events as <li>'s. For that reason I make the
<li> events Draggable and and <td>'s Droppable. When an
event (<li>) is dropped I either attach it to the <ul>
element of that day, or if that doesn't exist, create one first.
Everything works beautifully. The only issue is that there is always a
2-3 seconds delay before the dragged element reacts. That means I click
on the event, hold the mouse button and start to move and it takes 2-3
seconds before the free-floating <li> elements starts to follow
my mouse. So since this would make for a poor user experience I'd love
to fix it.
Please take a look at my code, and if you can see anything that could
be the performance bottle neck I'd be happy if you'd let me know about
it ; ):
<tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>-----</tt>
<tt>$('.calendar-view td').click(CalendarController.dayClick)
.Droppable(
{
    accept : 'event',
    activeclass: 'dropzoneactive',
    hoverclass:    'today',
    ondrop: function (drag)
            {
                var ul = $('ul', this);
               
                if (!ul.length)
                    ul = $('<ul></ul>').appendTo(this);
               
                $(drag).appendTo(ul).position('static');
            },
    fit: true
});
$('.calendar-view td li')
.Draggable(
{
    zIndex:     1000,
    ghosting:   true,
    opacity:    1
}</tt>
<tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>------</tt><tt>-----</tt>
Many thanks in advance,
Felix Geisendörfer
<div class="moz-signature">--
<small>--------------------------
<a href="http://www.thinkingphp.org">http://www.thinkingphp.org</a>
<a href="http://www.fg-webdesign.de">http://www.fg-webdesign.de</a>
</small></div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/