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文档详细说明了如何触发其布局功能，因此另一种方法是只有可拖动的元素，并将它们放在一个packery容器中。然后，当你想对它们进行排序时，你可以触发packery.layout（）函数。

我希望这有用，我只是刚开始堆栈溢出，所以任何反馈都会受到赞赏。

随机放置可拖动的div - 组织/排序功能？

1 个答案: