table에서tr,td의 이동 가능 효과 실현

코드 먼저 올리기:

    
                    

    

        

            

                

                    

                    

                        

                            
 
                            
0
                            
1
                            
2
                            
3
                        
                    
                    

                        

                            

                             
                            
 1
                            
                            
 1
                            
                            
 1
                            
                            
 1
                            
                        
                        

                            

                             
                            
                             
 2
                            
                            
 2
                            
                            
 2
                            
                            
 2
                            
                            
                        
                        

                            

                             
                            
                            
 3
                            
                            
 3
                            
                            
 3
                            
                            
 3
                            
                        
                        

                            

                             
                            
                            
 4
                            
                            
 4
                            
                            
 4
                            
                            
 4
                            
                        
                    
                
            
        
    







$(function() {

    $('.tdsort1').mousedown(function(event) {
        $(this).parent().sortable({cancel:function() {
        }});

        $('.rcontent').sortable({
            axis   : 'x',
            items: "td", // tr 
            revert : true,
            update : function(event, ui) {
                // ====   ====
                // alert(' ！');
                // window.location.reload();
            }
        })
    })

    $('.tdsort1').mouseup(function() {
        $(".tcontent").sortable("enable");
    })

    $(".tcontent").sortable({
        cursor: "move",
        items: "tr", // tr 
        opacity: 0.6, // ， 0.6
        revert: true, // ， 
        update: function(event, ui) { // 
            // ====   ====
            // alert(' ！');
            // window.location.reload();
        }
    });
    $(".tcontent").disableSelection();
})

양식이 없으니 그냥 보고 원리를 알면 된다
이 효과는 주로 jQueryUI라는 플러그인을 사용해서 이루어집니다. 반드시 이 물건을 다운로드해야 합니다.

구체적인 실현은 위의 js 코드를 보십시오

테스트한 친구에게 이런 의문이 있을 수 있습니다:

너 이거 안 돼. 일단 td를 옮기면tr는 움직일 수 없어

우리는 코드를 볼 수 있다.tr의 이동과 td의 이동은 두 가지 동작이다. 한 동작을 완성하지 못했기 때문에 우리는 동작이 촉발되기 전의 상태를 회복해야 한다. 그러면 다음 동작의 조작은 이전 동작의 영향을 받지 않는다

그래서 답은 우리가 하나의 동작을 터치하고 일련의 조작을 완성한 후에 페이지를 새로 고침하는 것이다. 그러면 우리가 터치하는 다음 동작은 전혀 영향을 받지 않는

우리가 이 이동 효과를 하는 것은 말하자면 다른 방식으로 정렬을 하려고 하는 것이다. 이렇게 하면 된다