随机放置的可拖动div-组织/排序函数

Question

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

然而，使用媒体查询，页面使用packery以网格方式显示769px以下浏览器宽度的相同图像。

我有一个想法，创建一个"排序/组织"按钮可能会很有趣，它会使用packery重新排列这些div，并删除已经应用的可拖动类，但我不知道这是否可能，也不知道如何进行。如果有任何方法可以使这个过程动画化，那也是一个奖励！

如果有人能至少为我指明正确的方向，我将不胜感激！！

Answer 1

希望这能给您一个起点。

我会阅读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.layout（）函数。

我希望这是有帮助的，我才刚刚开始堆栈溢出，所以任何反馈都将不胜感激。