0

我创建了一些可排序的 li，在每个 li 内部都有一个表单，单击按钮会显示该表单。除了这些 li 中的表单字段不起作用之外，一切都运行良好，但是是的，当我们右键单击它们时，它们开始正常运行。点击这里进行现场演示。 

        $(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');
        });
    });
4

1 回答 1

1

从您的代码中删除这一行，它将起作用：

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

jsfiddle

于 2013-03-13T14:59:24.633 回答