MixItUp이있는 하나의 그리드에서 여러 정렬

MixItUp 프레임 워크를 사용하여 사용자가 마스터 그리드 내의 개별 그리드에 대해 data-sort = "random"을 수행 할 수있게하려고합니다. 본질적으로 모든 블록을 함께 섞는 하나의 정렬 컨트롤 대신에 각 작은 블록에 대해 "셔플"컨트롤을 갖고 싶습니다.MixItUp이있는 하나의 그리드에서 여러 정렬

<ul> 
<a href="#" class="sort" data-sort="random">Shuffle</a> 
</ul> 

<ul id="Grid"> 
<div class="block1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
</div> 
<div class="block1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
</div> 
<div class="block1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
</div> 
<div class="block1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
</div> 
<div class="block1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="two"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="three"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="four"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
    <li class="mix" id="five"></li> 
</div> 
</ul>

이, 그래서 여기에 설명하기 어려운 것은 그것을 시각화하는 바이올린입니다 : http://jsfiddle.net/kyleclay/F4xAx/

그리고 MixItUp 문서 사이트에 다른 링크 : http://mixitup.io/

나는 또한 종류의 newb 해요 SO에 게시하고 방금 첫 번째 바이올린을 만들었으므로 더 설명하거나 다르게해야 할 필요가 있다면 알려주십시오. 미리 감사드립니다.

출처

2013-12-09 Kyle Clay

알았어. 알았어. 각 블록에 대해 #grid 요소를 별도로 설정하고 각 #grid 요소에 고유 한 sortSelector를 지정해야했습니다. http://jsfiddle.net/kyleclay/F4xAx/

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href="style.css" /> 
<script src="jquery.js"></script> 
<script src="jquery.mixitup.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $('#Grid1').mixitup({ 
      sortSelector: '.shuffle1', 
     }) 
      $('#Grid2').mixitup({ 
      sortSelector: '.shuffle2', 
     }); 
    }); 
</script> 
</head> 
<body> 

<ul> 
    <a href="#" class="shuffle1" data-sort="random">Randomize</a> 
    <a href="#" class="shuffle2" data-sort="random">Randomize</a> 
</ul> 

<ul id="Grid1"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    ... 
</ul> 

<ul id="Grid2"> 
    <li class="mix" id="one"></li> 
    <li class="mix" id="one"></li> 
    ... 
</ul> 

</body>

사람이 나중에 참조 할 수 있도록 좋아하면 내가 바이올린을 업데이트했습니다 여기의 일반적인 모습입니다

출처

2013-12-12 22:17:50

MixItUp이있는 하나의 그리드에서 여러 정렬

답변

관련 문제