带有可排序选项的jQuery表单生成器

我正在尝试使用jQuery构建一个Survey Creator模块，它可以构建各种类型的问题。从一道选择题开始，这道题将有一个问题和几个选项。我已经编写了以下代码

$(function () {
    $("#sortable").sortable({

    });
});
$('#sortable3').sortable({
    //helper: 'clone',
    //placeholder: 'ui-state-highlight',
    //opacity: '.5',
    start: function (event, ui) {
        $(ui.item).show();
    }
});

(function () {
    $("#txt").live('click', function () {

        var $ctrl = $('<input type="text" name="inputtext" value="Enter Your Questions Here..."> <br /> <label>Required.? </label> <input type="checkbox" value="required"> <br /><input type="text" name="inputtext" value="Enter Notes Here..."> <br />').addClass("text");
        $("#holder").append($ctrl);

        var $options = $('<ul id="sortable3"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>');

        $("#holder").append($options);
    });

})();

(function () {
    var i = 3;
    //var num = i++;
    $(".addChoices").live('click', function () {
        var $opt = $('<div id="div' + ++i + '" ><input type="text" name="inputtext" value="choice ' + i + ' " id="txt" + i++ +>  <span class="addChoices"> + </span>&nbsp; &nbsp; &nbsp; <span class="removeChoices" id="' + i + '"> - </span> </div>');
        $("#options").append($opt);

        //alert("Add");
    });

})();
(function () {
    $(".removeChoices").live('click', function () {
        alert("Getting Id " + $(this).attr('id'));
        var $idRem = $(this).attr('id');
        var div = $(this).attr('id');
        //alert("div"+div);
        var divId = "div" + div;
        $("#" + divId).remove();
    });

})();

HTML

---

现在，当我点击一个按钮时，它会添加问题和一些选项。我可以添加或删除选项。现在，我想对选项进行排序，以便用户可以按照自己希望的显示顺序对其进行排列。

有可用于此类内容的插件：

---

有一些插件可用于这种类型的东西：

---

p.S.我没有足够的代表对你的问题发表评论，否则我会。我没有足够的代表对你的问题发表评论，否则我会的。

<div style="display:inline">
  <input type="button" id="txt" value="Add Text Box" style= " " />
</div>
<div id="holder"> </div>
<div id="options"> </div>