Question

我已经创建了一些可排序的li，并且在每个li中都有一个表单，只需单击一个按钮即可显示。一切都工作得很好，除了这些里面的表单字段不起作用，但是当我们右键点击它们时它们开始正常运行。点击此处查看live demo。

        $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();

        var fieldsCount = $(".remove").length;
        $(".btn").click(function (e) {

            e.preventDefault();

            if(fieldsCount){
                number = $('ul#sortable li:last').attr("id");
                fieldsCount++;
                $("#sortable").append('<li id ="'+fieldsCount+'" class="ui-state-default"><a class="remove ui-icon hello'+fieldsCount+'">remove</a><span class="ui-icon down_arrow"></span>row '+fieldsCount+' <div class="toggle_div" id="toggle_div"><div class="field_left" id="field_left"><input type="text" name="" class="" id="" placeholder="label"></input></div><div class="field_right" id="field_right"><select name="" class="" id="" ><option>Text field</option><option>Textarea</option><option>Dropdown</option><option>Radio Button</option></select><input type="text" class="" id="" placeholder="discription" ></input></div></div></li>');
                        $("#sortable").sortable('refresh');
                }else{
                    $("#sortable").append('<li id="1" class="ui-state-default"><a class="remove ui-icon hello1">remove</a><span class="ui-icon down_arrow"></span>row 1 <div class="toggle_div" id="toggle_div"><div class="field_left" id="field_left"><input type="text" name="" class="" id="" placeholder="label"></input></div><div class="field_right" id="field_right"><select name="" class="" id="" ><option>Text field</option><option>Textarea</option><option>Dropdown</option><option>Radio Button</option></select><input type="text" class="" id="" placeholder="discription" ></input></div></div></li>');
                    $("#sortable").sortable('refresh');
                }

        });

        $("#sortable").on("click", "a.remove", function(){
            $(this).parent().remove();
            $("#sortable").sortable('refresh');
        });
        var flip = 0;
        $("#sortable").on("click", "span", function(){
            $(this).next(".toggle_div").toggle('slow', function(){
                if(flip++ % 2 == 0){
                    $(this).removeClass("up_arrow");
                    $(this).addClass("down_arrow");
                }else{
                    $(this).removeClass("down_arrow");
                    $(this).addClass("up_arrow");
                }
            });
            $("#sortable").sortable('refresh');
        });
    });

Answer 1

从代码中删除此行，它将起作用：

  $( "#sortable" ).disableSelection();

jsfiddle

可排序li中的表单字段无效

1 个答案: