CSS Grid - лучший способ переместить строку вверх? - PullRequest
Новая
       4

CSS Grid - лучший способ переместить строку вверх?

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

Поскольку в CSS-сетке отсутствует концепция обтекания строк, как мне реализовать функцию, в которой я могу переместить строку вверх на одну строку?

Обычно я бы взял родителя строки и мутировал dom с помощью JS (appendChild и т. Д.).Но не уверен, как это сделать в сетке CSS.По крайней мере, не в чистом виде.

Полагаю, я мог бы взять 6 пролётов и видоизменить дом, сдвинув их всех с помощью JS, но, кажется, не очень удобно делать это с 6 пролётами.

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
  <body>
<div class="grid">
        <span><strong>Id</strong></span>
        <span><strong>Full Name</strong></span>
        <span><strong>Country</strong></span>
        <span><strong>Created at</strong></span>
        <span><strong>Email</strong></span>
        <span><strong></strong></span>
        <span>0</span>
        <span>Aaron Kris</span>
        <span>Philippines</span>
        <span>1991-05-23T14:19:51</span>
        <span>Ophelia_Mitchell@karley.name</span>
        <span><button>move row up</button></span>
  
        <span>1</span>
        <span>Simeon McLaughlin</span>
        <span>Singapore</span>
        <span>2012-03-07T00:08:36</span>
        <span>Simon@salvatore.biz</span>
        <span><button>move row up</button></span>
        
        
        
        
        <span>2</span>
        <span>Kelsie Shanahan</span>
        <span>Brazil</span>
        <span>1985-03-10T20:13:04</span>
        <span>Karianne@salvatore.biz</span>
        <span><button>move row up</button></span>
    </div>
  </body>

1 Ответ

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

Я пытаюсь получить ваш результат 

$(document).ready(function(e) {
    $('button').on('click', function(){
		var allspn=$('.grid>span').length;
		var selfpos=$(this).parent('span').index();
		var span6=$('.grid>span').eq(selfpos);
		var span5=$('.grid>span').eq(selfpos-1);
		var span4=$('.grid>span').eq(selfpos-2);
		var span3=$('.grid>span').eq(selfpos-3);
		var span2=$('.grid>span').eq(selfpos-4);
		var span1=$('.grid>span').eq(selfpos-5);
		
		if($(this).parent('span').index()>11){
		$(span6).insertBefore($('.grid>span').eq(selfpos-11));
		$(span5).insertBefore($('.grid>span').eq(selfpos-11));
		$(span4).insertBefore($('.grid>span').eq(selfpos-11));
		$(span3).insertBefore($('.grid>span').eq(selfpos-11));
		$(span2).insertBefore($('.grid>span').eq(selfpos-11));
		$(span1).insertBefore($('.grid>span').eq(selfpos-11));
		}
		})
});
.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<div class="grid">
        <span><strong>Id</strong></span>
        <span><strong>Full Name</strong></span>
        <span><strong>Country</strong></span>
        <span><strong>Created at</strong></span>
        <span><strong>Email</strong></span>
        <span><strong></strong></span>
        <span>0</span>
        <span>Aaron Kris</span>
        <span>Philippines</span>
        <span>1991-05-23T14:19:51</span>
        <span>Ophelia_Mitchell@karley.name</span>
        <span><button>move row up</button></span>
  
        <span>1</span>
        <span>Simeon McLaughlin</span>
        <span>Singapore</span>
        <span>2012-03-07T00:08:36</span>
        <span>Simon@salvatore.biz</span>
        <span><button>move row up</button></span>
        
        
        
        
        <span>2</span>
        <span>Kelsie Shanahan</span>
        <span>Brazil</span>
        <span>1985-03-10T20:13:04</span>
        <span>Karianne@salvatore.biz</span>
        <span><button>move row up</button></span>
    </div>
</div>
...