Question

我正在尝试使用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

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

现在，当我点击一个按钮时，它会添加问题和一些选项。我可以添加或删除选项。现在我想让选项排序，以便用户可以按照他希望它出现的顺序排列。

Answer 1

有适用于此类事物的插件：

http://jqueryui.com/demos/sortable/
http://farhadi.ir/projects/html5sortable/

带有可排序选项的jQuery表单构建器

1 个答案: