A web interface (draggable elements, remembering state) similar to Wufoo

The question I have is very specific. I wanted to have an app where I can create forms, as on Wufoo, with easy to use interface. Which means, draggable elements.

My problem is that I cannot figure out how will the state be saved in the database once the use changes the ordinal position of the form elements. I can do the front-end side, and there are libraries available for that but how do I save a particular instance of the form in the backend so that the next time use logs in, the order is same.

I would love to use Django for this app. So,开发者_C百科 the basic classes I can think of are:

class Form(models.Model):
  """...objects..."""


class TextField(models.Model):
  """...objects..."""
  #FK to Form()


class TitleArea(models.Model):
  """...objects..."""
  #FK to Form()

I can also have specific ID's on the elements in the HTML form:

<input id="Field2" name="Field2" type="text"/>

How do they (Wufoo) do this? Is my Model not correct? I know it is naive. Thanks.

---

You can use ModelForm to create forms using a model instance. Just save the model after a user is done editing, and then when you create the form for them again use the model as an instance to your ModelForm (or formset):

form = YourForm(instance=model_instance)

---

hidden input fields for the win.

suppose:

$("#submitForm").click(function() {
    // Check out the state of the union and change the hidden fields accordingly..
    // Something like:
    for (var i = 0; i < $(".orderedElements").length; i++) {
        $("#ordered-" + ((Number) i + 1)).attr('value', $(".orderedElements").eq(i).attr('id'));
    }
});

If you catch my drift.

---

Well, a good place to start is to think about a use-case. If I'm a user, what am I going to need available to me, to build a form? Textfields, sure -- but what else? Is the form going to have a title? A URL? An expiration date?

When you have this kind of information plotted out, then you can start building out your models in Django.