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 に答える