jQuery UI drag and drop input field contents

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.

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:

alert($('.drag1').length);
$('.drag1').draggable({helper:'clone'});
$('.drag1').droppable({
    drop: alert('here')
});

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.

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

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

The question is: Why does the drop fire when the page is loa开发者_StackOverflowded rather when when the drag is dropped?

Perhaps I can't have an element be both draggable and droppable?

Any ideas will be greatly appreciated.

Terry Liittschwager

You're actually calling the alert function. Instead, do this:

drop: function() { alert('here'); }