Use of clone() and appendTo() with draggable - unexpected results with dragging
<p>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:</p>

<ol>
<li>Drag the span and drop into the calendar table.</li>
<li>On the drag "start" event, clone the span and append it to the table cell.</li>
<li>Now there is another span ready to be dropped into the calendar table.</li>
</ol>

<p>One line of code does the work:</p>

<pre><code>                      $(ui.helper).clone(true).prependTo(ui.helper.parent());
</code></pre>

<p>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). </p>

<p>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?</p>

<p>Thanks!</p>

<p>Matt</p>

<p>I posted this identical question to the jQuery forum as well.</p>
