I'm constructing a UI for a doctor scheduling app. We have several doctors, each of whom can go in one of several locations on a scheduled day (M - F). I have the main day/location grid (table) in the center of the screen. At the left is a table for the doctor names. On loading, each table cell contains a span (outlined) with the doctor name. The doctor name can go in one slot for each day. I didn't want to just put 5 copies of the doctor name, because the doctor might not be available all 5 days of the week. The idea was:

1. Drag the span and drop into the calendar table.
2. On the drag "start" event, clone the span and append it to the table cell.
3. Now there is another span ready to be dropped into the calendar table.

One line of code does the work:

                      $(ui.helper).clone(true).prependTo(ui.helper.parent());

This works. But when I move the cloned span, the original one moves in sync - preserving the spatial relationships as I move the clone around (no doubt there's a "position:relative;left=XX;top=YY" inserted somewhere).

I'm sure there's a way to do what I'm thinking of, while keeping the two spans independent. But I'm not thinking of one. Does anyone have an idea?

Thanks!

Matt

I posted this identical question to the jQuery forum as well.