代码之家 › 专栏 › 技术社区 › dman

CSS网格-向上移动行的最佳方式?

css-grid css3 css javascript

dman · 技术社区 · 6 年前

由于CSS网格没有行包装器的概念,我如何实现一个可以将一行向上移动的特性?

通常,我会获取一个行父级并用JS(appendChild等)对dom进行变异。但不知道如何在CSS网格中实现。至少不干净。

我想我可以抓取6个跨度,并通过使用JS将它们全部转换为dom,但是用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 回复 | 直到 6 年前

AJAY MAURYA 6 年前

我想知道你的结果

$(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>