I've developed a simple site using a combination of html, javascript w/ jquery, and php.

I have a menu, which in html consists of a series of forms, each of which contains an input button, so basically:

<form><input type="button" value="a"></input></form>
<form><input type="button" value="b"></input></form>

I want to be able to enable the user to move individual buttons to new locations in the menu (and have this action call some other code). I found the "draggable" class, and was hoping to be able to make either the form or the button draggable, but doing so doesn't seem to enable it to be dragged:

$(document).ready(function() {
<form class="draggable"><input type="button" class="draggable" value="a"></input></form>

Can forms and input elements not be made draggable? Is there another method you'd recommend for accomplishing this?

I was alternatively thinking maybe somehow cloning the button and then making that clone draggable(?).