0

目前我有一个页面，它在加载时使用 math.random 在页面上随机散布可拖动的 div

使用媒体查询，但是页面使用 packery 以网格方式显示宽度低于 769 像素的浏览器的相同图像。

我的想法是创建一个“排序/组织”按钮可能会很有趣，该按钮将使用打包程序重新排列这些 div 并删除已应用的可拖动类，但是我不知道这是否可能或如何去做。如果有任何动画这个过程的方法，那也将是一个奖励！

如果有人至少能指出我正确的方向，我将非常感激！

4

1 回答 1

0

希望这能给你一个起点。

我会阅读 JQuery，因为它有一些有用的 DOM 操作助手。我认为这不是最有效的方法，我认为您需要重新考虑您的测试工具以在未来执行此操作，但希望这可以帮助您开始。

首先，我添加了一个按钮来触发排序

<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>

然后更新脚本以覆盖 css 设置以在可拖动视图和项目视图之间切换。

// general wait for jquery syntax
$(function(){

      // trigger the layour to sort get the packery container
  var container = document.querySelector('#container.packery');
  var pckry = new Packery( container );
  //button function
  $("#sort").click(function(){
    //Hide all the dragged divs
    //ui-helper-hidden is a jquery ui hider class
    if($('.box').css('display') == 'block') {
      $('.box').css({'display':'none'});
      //Show all the item class's
      $('.item').css({'display':'block'});
      //show the container
      $('#container').css({'display':'block'});
      // trigger the layour to sort
       pckry.layout();
    } else {
      //hide all the item class's
      $('.item').css({'display':'none'});
      //hide the container
      $('#container').css({'display':'none'});  
      //show the draggable box's
      $('.box').css({'display':'block'});    
    }
  });

  $( ".pstn" ).draggable({ scroll: false });

  $(".pstn").each(function(i,el){

      var tLeft = Math.floor(Math.random()*1000),
          tTop  = Math.floor(Math.random()*1000);

      $(el).css({position:'absolute', left: tLeft, top: tTop});

  });

});

正如我所说，这是更多的开始。packery 文档详细说明了如何触发其布局功能，因此另一种方法是仅具有可拖动元素，并将这些元素放在 packery 容器中。然后，当你想对它们进行排序时，你可以触发 packery.layout() 函数。

我希望这会有所帮助，我才刚刚开始处理堆栈溢出，因此我们将不胜感激。

于 2013-07-04T13:01:04.110 回答