使用MixItUp在一個網格中進行多個排序

使用MixItUp框架，我嘗試允許用戶對主網格內的各個網格執行data-sort =「random」。實質上，我想爲每個小塊設置一個「Shuffle」控件，而不是將所有塊混合在一起的一個排序控件。使用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/

我也是那種對於新手在SO上張貼，我剛剛創建了我的第一個小提琴，所以讓我知道如果你需要我解釋更多或做不同的事情。提前致謝。

來源

2013-12-09 Kyle Clay

好吧我想通了。我必須爲每個塊設置單獨的#grid元素，然後爲每個#grid元素分配自己的sortSelector。這裏是它的一般看：

<!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>

我已經更新了小提琴，如果有人想以備將來參考：http://jsfiddle.net/kyleclay/F4xAx/

來源

2013-12-12 22:17:50

使用MixItUp在一個網格中進行多個排序

回答

相關問題