Question

在带有iosslider的120张图像（130x130像素）的长面板上给予触摸滑动滑动。我正在使用jQuery quicksand对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。一直在看这个问题，所以对于一些建议会很好。

非常感谢，

抢劫。

Answer 1

代码中的缺陷sort()仅对jQuery对象进行排序，但不会更改DOM。下面只添加一行来清空现有内容，并将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')
    }
});

DEMO：http://jsfiddle.net/yMtwp/

Answer 2

我认为你的问题主要涉及对几个面板中的项目进行沙子排序，这会导致沙子排序插件行为异常。如果你可以不使用面板，我建议你只将它们放在一个面板中，一切都会正常工作。

如果没有，我建议下面的解决方案，你有一个容器用于所有面板，在这个超级面板上进行沙子排序，然后在沙子分拣完成后重建面板。我将在下面展示一个工作示例：

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

修改

这是另一个建议，使列和同时在一个面板中，而不是重组，这将使动画丑陋。

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

jQuery流沙排序

2 个答案: