Перемещение элемента центра окна по щелчку его

Question

Что я имею в HTML является 1 основной и 1 коробка внутренняя коробка с позиции абсолютной. Внутренняя коробка имеет более маленькие коробки. То, что я пытаюсь достичь, - когда я нажимаю на коробку, перемещаю весь внутренний ящик и делаю окно в центре окна.

Например, посмотрите изображение, которое я приложил. Первое изображение - нормальное состояние. Второе изображение, после щелчка на первом поле, внутренняя коробка перемещается и делает первый квадрат в центре экрана. Если я нажму на второй ящик, он должен переместить белый ящик в положение, так что второй ящик показывает в центре. То же самое для 3-го ящика, 4-го ящика и так далее.

Я не уверен, как это сделать. но у меня есть фрагмент, который может помочь вам рассказать мне, что делать.

$('.box').click(function(){ 
 
    var top = $(this).position().top; 
 
    var left = $(this).position().left; 
 
    $('#inner-box').css({ 
 
    'margin-left' : left, 
 
    'margin-top' : top 
 
    }); 
 
});

.main-box{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color:gray; 
 
    overflow:hidden; 
 
} 
 

 
    .inner-box{ 
 
    position:absolute; 
 
    top: 15px; 
 
    left:15px; 
 
    width:calc(100% - 30px); 
 
    height: calc(100% - 30px); 
 
    background-color: white; 
 
    font-size:0; 
 
    } 
 

 
    .box{ 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    background-color: black; 
 
    height: 20%; 
 
    width: 22%; 
 
    margin:1.1%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Answer 1

Я нашел решение. Если кто-то ищет то же решение, вот мой код-

$(document).on('click', '.box', function(){ 
    var centerX = $('#main-box').height()/2; 
    var centerY = $('#main-box').width()/2; 

    var pos_top = $(this).position().top; 
    var pos_left = $(this).position().left; 

    var box_width = $(this).width()/2; 
    var box_height = $(this).height()/2; 

    var top = (-1) * (pos_top - centerX + box_height); 
    var left = (-1) * (pos_left - centerY + box_width); 


    $('#inner-box').css({ 
     'margin-left' : left, 
     'margin-top' : top 
    }) 
}); 

Answer 2

Вы можете использовать CSS trastion с calc получить документы with и height разделенных 2, чтобы переместить окно в центре экрана. Просто переключите класс на элемент #inner-box.

Вот один из способов сделать это.

$('.box').click(function() { 
 
    $('#inner-box').toggleClass('center'); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.main-box{ 
 
    position:relative; 
 
    height: 100vh; 
 
    background-color:gray; 
 
    overflow:hidden; 
 
} 
 

 
.inner-box{ 
 
    position:absolute; 
 
    top: 15px; 
 
    left:15px; 
 
    width:calc(100% - 30px); 
 
    height: calc(100% - 30px); 
 
    background-color: white; 
 
    font-size:0; 
 
    -webkit-transition: top 0.3s linear, left 0.3s linear; 
 
    -moz-transition: top 0.3s linear, left 0.3s linear; 
 
    -ms-transition: top 0.3s linear, left 0.3s linear; 
 
    -o-transition: top 0.3s linear, left 0.3s linear; 
 
    transition: top 0.3s linear, left 0.3s linear; 
 
} 
 

 
#inner-box.center { 
 
    top: calc(100vh/2); 
 
    left: calc(100vw/2); 
 
} 
 

 
.box{ 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    background-color: black; 
 
    height: 20%; 
 
    width: 22%; 
 
    margin:1.1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Answer 3

тумблер нового класса в JQuery с top:50%; left:50%; и рассчитать величину маржи по позиции коробки по отношению к родителю

var pat=$('#inner-box').offset().top,pal=$('#inner-box').offset().left; 
 
$('.box').click(function() { 
 
    var top = pat+$(this).position().top+$(this).height()/2; 
 
    var left = pal+$(this).position().left+$(this).width()/2; 
 
    //alert(top +","+left); 
 
    $('#inner-box').css({ 
 
     'margin-left' : -1*left, 
 
     'margin-top' : -1*top 
 
    }); 
 
    if(!$('#inner-box').hasClass('newposit')) 
 
    $('#inner-box').addClass('newposit'); 
 
});

.main-box{ 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
right:0; 
 
bottom:0; 
 
background-color:gray; 
 
overflow:hidden; 
 
    } 
 

 
    .inner-box{ 
 
position:absolute; 
 
top: 15px; 
 
left:15px; 
 
width:calc(100% - 30px); 
 
height: calc(100% - 30px); 
 
background-color: white; 
 
font-size:0; 
 
    -webkit-transition: all 0.5s linear; 
 
    -moz-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    -o-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
    } 
 

 
    .box{ 
 
display:inline-block; 
 
border:1px solid red; 
 
background-color: black; 
 
height: 20%; 
 
width: 22%; 
 
margin:1.1%; 
 
    } 
 
    .newposit { 
 
top: calc(50%); 
 
left: calc(50%); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Answer 4

Вы должны найти индекс щелкнули коробочку:

var indexOfClickedBox; 
$('.box').click(function(){ 
    indexOfClickedBox = $('.box').index(this); 
}); 

Из этого индекса можно найти положение коробочку в его родителя , и вы можете вычислить значения, чтобы поместить этот ящик в центр.