Question

我有像下面这样的html表，我希望“Group 1”项目只能在“Group 1”项目之间进行排序。

我正在使用jQuery.sortable。

由于所有都是表行（tr），我无法限制一个用另一个组项排序的组项。

<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var templateIndex = 0;
        var templateCounter;
        var templateid;

        for(var templateCounter = 0; templateCounter <=3; templateCounter++){
            templateIndex++;
            if (templateIndex === 1){
                    templateid = "ID of First template to be used.";
                    $('#steps').append('<li>'+templateid+'</li>');
                    /* whatever you want to do here */  
                }
                if (templateIndex === 2){
                    templateid = "ID of Second template to be used.";
                    $('#steps').append('<li>'+templateid+'</li>');  
                    /* whatever you want to do here */  
                }
                if (templateIndex === 3){
                    templateid = "ID of Third template to be used.";
                    $('#steps').append('<li>'+templateid+'</li>');  
                    /* whatever you want to do here */  
                }
                if (templateIndex === 4){
                    templateid = "ID of Fourth template to be used.";
                    $('#steps').append('<li>'+templateid+'</li>');  
                    /* whatever you want to do here */  
                }
        }
    });
</script>
</head>
<body id="demos">
<h1>Result</h1>
<ul id='steps'></ul>
</body>
</html>

Answer 1

您可以将class="group1"类添加到tr并使用connectWith: ".group1"，如下所示：

$(".group1").sortable({
 connectWith: ".group1"
});

Online demo (fiddle)

JQuery可排序的tr

1 个答案: