Generador de formularios jQuery con opciones clasificables
Frecuentes
Visto 1,461 veces
2
Estoy tratando de crear un módulo creador de encuestas usando jQuery que crea varios tipos de preguntas. Comenzando con una pregunta de opción múltiple que tendrá una pregunta y algunas opciones. He escrito el siguiente código.
$(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> <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>
Ahora, cuando hago clic en un botón, agrega la pregunta y algunas opciones. Puedo agregar o quitar opciones. Ahora quiero que las opciones se puedan ordenar para que el usuario pueda organizarlas en el orden en que quiere que aparezcan.
1 Respuestas
0
Hay complementos disponibles para este tipo de cosas:
http://jqueryui.com/demos/sortable/
http://farhadi.ir/projects/html5sortable/
Respondido 22 ago 12, 12:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery html css forms jquery-ui-sortable or haz tu propia pregunta.
PD: no tengo suficiente representante para comentar sobre su pregunta, de lo contrario lo habría hecho. - mezclar