как сохранить выравнивание при перемещении элементов - PullRequest
Новая
       19

как сохранить выравнивание при перемещении элементов

0 голосов
/ 25 ноября 2018 

$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('button').on('click', function(){
$('.act').insertAfter($('.act').next());
});
.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
</div>
<br>
<button>CLICK</button>

Нажмите на первое поле, чтобы сделать его активным.

Затем нажмите на кнопку, чтобы переместить ее вправо.

Вы видите, что выравнивание потеряно, то есть между пробелами нет пробелов.

Как это предотвратить?

Ответы [ 2 ]

0 голосов
/ 25 ноября 2018

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

Я обработал условие, когда .next() недоступен, следовательно, петли элементов родного брата. 

$('.box').on('click', function (){
  $('.act').removeClass('act');
  $(this).addClass('act');
});

$('button').on('click', function (){ 
  if($('.act').length > 0)
  {
    activeBox = $('.act');
    nextBox = $('.act').next('.box').length > 0 ? $('.act').next('.box') : $('.box').eq(0);

    cloneActiveBox = activeBox.clone();
    cloneNextBox = nextBox.clone(); 

    activeBox.replaceWith(cloneNextBox);
    nextBox.replaceWith(cloneActiveBox); 

    $('.box').on('click', function (){
      $('.act').removeClass('act');
      $(this).addClass('act');
    });    
  } 
});

Ссылка на рабочую скрипку: http://jsfiddle.net/43psy50b/2/

0 голосов
/ 25 ноября 2018

Вместо использования insertAfterafter, который испортит стиль justify, просто поменяйте местами дивы: 

$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('button').on('click', function(){

    div1 = $('.act');
    div2 = $('.act').next();

    tdiv1 = div1.clone();
    tdiv2 = div2.clone();

    if(!div2.is(':empty')){
        div1.replaceWith(tdiv2);
        div2.replaceWith(tdiv1);

        $('.box').on('click', function(){
            $('.act').removeClass('act');
            $(this).addClass('act');
        });
    }
//   $('.act').insertAfter($('.act').next());
});
.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}

.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}

.act{
background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
<br>
<button>CLICK</button>
...