jQuery UI drag and drop input field contents
<p>I working on an application where aircraft loadmasters enter weights into a number of individual pallet positions. It's often necessary to change where a given pallet has been put, so I'm trying to fix it so that they can drag and drop a pallet from one position to another.</p>

<p>Rather than deal with the input fields directly, I've chosen for the moment (perhaps wrongly) to have alongside each input field open and close brackets "[ ]" to use as a handle. Each handle element has class='drag1'. Given the code below:</p>

<pre><code>alert($('.drag1').length);
$('.drag1').draggable({helper:'clone'});
$('.drag1').droppable({
    drop: alert('here')
});
</code></pre>

<p>When the page loads, the first alert properly reports the correct number of pallet positions (74) and then I immediately get the second alert 'here' once and only once.</p>

<p>What I was hoping for was that I would get the second alert only when I dropped rather than before I did anything.</p>

<p>The dragging is working in that a clone of the "[ ]" moves around, but nothing happens when I drop it on another "[ ]".</p>

<p>The question is: Why does the drop fire when the page is loaded rather when when the drag is dropped?</p>

<p>Perhaps I can't have an element be both draggable and droppable?</p>

<p>The page is at <a href="http://terryliittschwager.com/WB/load.html?N100YY" rel="nofollow">http://terryliittschwager.com/WB/load.html?N100YY</a></p>

<p>Any ideas will be greatly appreciated.</p>

<p>Terry Liittschwager</p>
