Question

其实我想在视觉上显示排序示例，我尝试了很多方法，但仍然没有找到正确的路径移动和完成？还有我试过的是

getBoundingClientRect()
交换输入值（我不想交换值但交换整个元素目视）

但以上都不适合我，任何人都能引导我走向更好的方向，这样我才能完成任务吗？

function BubbleSort(){
    var VisualSort=[];
    var inputElements = document.forms["BubbleSortForm"].getElementsByClassName("formControl");
    for(var i = 0; i < inputElements.length ; i++){
        VisualSort[i] = parseInt( inputElements[i].value );
    }

    // var inputValues = parseInt( inputElements[i].value );
    for( var i = 0 ; i  < inputElements.length-1  ; i++ ){
        for( var j = 0; j <  inputElements.length-1 ; j++ ){
            if( parseInt( inputElements[j].value ) > parseInt(inputElements[j+1].value )  ){
                 /*var swapa = inputElements[j].value;
                 inputElements[j].value = inputElements[j+1].value;
                 inputElements[j+1].value = swapa;*/

                 var input_id      = inputElements[j].id;
                 var input_id_swap = inputElements[j+1].id;

                 var Bounds_j   = inputElements[j].getBoundingClientRect();
                 var Bounds_j_1 = inputElements[j+1].getBoundingClientRect();

                 var elem = document.getElementById(input_id);
                 var elem_swap = document.getElementById(input_id_swap);

                 var pos_left_1 = inputElements[j+1].getBoundingClientRect().left;
                 var pos_right_1 = inputElements[j+1].getBoundingClientRect().right;

                 var pos_left = inputElements[j].getBoundingClientRect().left;
                 var pos_right = inputElements[j].getBoundingClientRect().right;

                 var jplus1 = j+1;

                 inputElements[jplus1].style.left = pos_left + 'px';
                 inputElements[jplus1].style.right = pos_right + 'px';

                 inputElements[j].style.left = pos_left_1 + 'px';
                 inputElements[j].style.right = pos_right_1 + 'px';
             }
         }
     }
     document.getElementById("btnSort").style.display = "none";
     document.getElementById("btnGenerateInput").style.display = "block";
     return VisualSort;
}

如何使用动画交换INPUT Eelement？纯JavaScript

0 个答案: