jquery - jQuery 流砂の並べ替え

Question

iossliderを使用した 120 枚の画像 (130x130px) の長いパネルで、タッチスワイプスライドを提供します。jQueryクイックサンドを使用して、4 列にあるブロックのコレクションを並べ替えています。そのため、それらを複製し、アイテムブロックを抽出し、並べ替えて、列 (パネル) に再度追加する必要があります。

<div id="tiles_viewport">
  <div id="mouseSwipeScroll">
    <div class="panel">
        <div class="item" data-id="1" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="2" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="3" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="4" data-state="0"><img src="xxx" /></div>
    </div>
    <div class="panel">
        <div class="item" data-id="5" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="6" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="7" data-state="1"><img src="xxx" /></div>
        <div class="item" data-id="8" data-state="0"><img src="xxx" /></div>
    </div>
    <div class="panel">...

CSS...

#tiles_viewport {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 535px;
  margin: 5px 0;
  padding: 0;
  overflow: hidden;
  z-index: 10;
}

#mouseSwipeScroll {
  -webkit-user-select: none;
  -moz-user-select: none;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#mouseSwipeScroll .panel {
  float: left;
  margin: 0;
  padding: 0;
  width: 130px;
  height: 535px;
  overflow: hidden;
}

#mouseSwipeScroll .panel .item {
  position: relative;
  margin: 0;
  padding: 0 5px 5px 5px;
  width: 120px;
  height: 130px;
}

Javascript:

$(function() { 
  sortTiles = function() {
        var panels = $('.panel');
        var items = $(panels).children('.item');
        var sortedItems = $(items).clone();

        // sort //
        sortedItems.sort(function(a, b) {
            return parseInt($(b).data('state')) - parseInt($(a).data('state'));
        });

        // wrap into panels again //
        $.each(sortedItems, function(i, el) {
            if(i % 4 == 0) {
                sortedItems.slice(i , i+4).wrapAll('<div class="panel">');
            }
        });

        // animate //
        $(panels).quicksand(sortedItems, {
            duration: 800,
            easing: 'easeInOutQuad'
        });
      }
});

$(document).ready(function() {

      $('#tiles_viewport').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        startAtSlide: 4
      });
});

並べ替えが機能しておらず、wrapAll が囲んでいるパネル div を追加していません。かなり長い間これを見てきましたので、アドバイスをいただければ幸いです。

どうもありがとう、

奪う。

score 1 · Accepted Answer

あなたの問題は主に、複数のパネルでアイテムをサンドソートすることに関連していると思います。これにより、サンドソートプラグインが誤動作します。パネルなしでできる場合は、それらを 1 つのパネルのみに配置することをお勧めします。すべてが正常に機能します。

そうでない場合は、以下の解決策を提案します。ここでは、すべてのパネル用のコンテナがあり、このスーパーパネルで砂選別を行い、砂選別が終了した後にパネルを再構築します。以下に実際の例を示します。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="https://github.com/razorjack/quicksand/raw/master/jquery.quicksand.js"></script>
<script type="text/javascript">
    function sortTiles() {
        var superpanel = $('.superpanel');
        var items = superpanel.find('.item');
        var sortedItems = items.clone();

        // sort //
        sortedItems.sort(function(a, b) {
            return parseInt($(b).data('state')) - parseInt($(a).data('state'));
        });

        // animate //
        superpanel.quicksand(sortedItems, {
            duration: 800
        }, function() {
           // wrap into panels again //
           var items = $('.superpanel .item');
           for(i=0; i<items.length; i+=4) {
                items.slice(i , i+4).wrapAll('<div class="panel">');
           }
        });

    }   
    $(function() {
        sortTiles();
    });
    </script>     
</head>
<html>
<body>
    <div class="superpanel">
        <div class="panel">
            <div class="item" data-id="4" data-state="4">Content 4</div>
            <div class="item" data-id="1" data-state="1">Content 1</div>
            <div class="item" data-id="3" data-state="3">Content 3</div>
            <div class="item" data-id="2" data-state="2">Content 2</div>
        </div>
        <div class="panel">
            <div class="item" data-id="8" data-state="8">Content 8</div>
            <div class="item" data-id="5" data-state="5">Content 5</div>
            <div class="item" data-id="7" data-state="7">Content 7</div>
            <div class="item" data-id="6" data-state="6">Content 6</div>
        </div>
    </div>
</body>
</html>

編集

アニメーションを醜くする再グループ化の代わりに、列を作成し、同時にそれらを 1 つのパネルに配置する別の提案を次に示します。

<html>
<head>
<style>
    .item {
        display: inline-block;
        width: 40%;
    }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="https://github.com/razorjack/quicksand/raw/master/jquery.quicksand.js"></script>
<script type="text/javascript">
    function sortTiles() {
        var superpanel = $('.superpanel');
        var items = superpanel.find('.item');
        var sortedItems = items.clone();

        // sort //
        sortedItems.sort(function(a, b) {
            return parseInt($(b).data('state')) - parseInt($(a).data('state'));
        });

        // animate //
        superpanel.quicksand(sortedItems, {
            duration: 800
        });

    }   
    $(function() {
        window.setTimeout(sortTiles, 1000);
    });
    </script>     
</head>
<html>
<body>
    <div class="superpanel">
            <div class="item" data-id="4" data-state="4">Content 4</div>
            <div class="item" data-id="1" data-state="1">Content 1</div>
            <div class="item" data-id="3" data-state="3">Content 3</div>
            <div class="item" data-id="2" data-state="2">Content 2</div>
            <div class="item" data-id="8" data-state="8">Content 8</div>
            <div class="item" data-id="5" data-state="5">Content 5</div>
            <div class="item" data-id="7" data-state="7">Content 7</div>
            <div class="item" data-id="6" data-state="6">Content 6</div>
    </div>
</body>
</html>

score 1 · Accepted Answer

あなたのコードの欠陥はsort()、jQuery オブジェクトをソートするだけで、DOM を変更しないことです。以下は、既存のコンテンツを空にするために1行追加するだけでwrapAll、新しいdivを作成してすぐにDOMに挿入するという概念に変更します

var panels = $('.panel');
var items = $(panels).children('.item');
var sortedItems = $(items).clone(); // sort //

$('#content').empty();

sortedItems.sort(function(a, b) {
    return parseInt($(b).data('state')) - parseInt($(a).data('state'));
});

$.each(sortedItems, function(i, el) {
    if (i % 4 == 0) {
        $('<div class="panel">').append(  sortedItems.slice(i, i + 4)).appendTo('#content')
    }
});

デモ: http://jsfiddle.net/yMtwp/

jquery - jQuery 流砂の並べ替え

2 に答える 2

Related

Reference